I am looking at the example files of vuetify. They all seem to be *.vue files. I am only familiar with *.html *.css *.js files where vue is used with CDN. How to convert/modify these vue files for CDN use? what are the steps? What are the pitfalls in doing so?
I am a beginner in vue.js and currently prototyping a tiny application to input/output few data and nothing fancy is required. CDN fits well for that.
So at first I would always recommend going with the Vue CLI instead of the CDN usage because it brings you a lot of benefits and a overall smoother developer expierence.
Coming to your question: Here is the starter template for Vuetify with a CDN https://codepen.io/pen?template=OJJeVge
They simply use the vuetify components inside a <script> tag with an id and mount that and initialize the vue instance with it.
You would put all other data stuff inside the <script> tag like you would do inside the script tag of a normal .vue file.
Related
I'm creating a Bootstrap Vue application (built with Vue CLI), and there's a Javascript library I want to be able to utilize: https://nadchif.github.io/html-duration-picker.js/. I tried putting the file in /assets and then using import in the script portion of App.vue (import './assets/html-duration-picker.min'), but I have not been able to get the script to work, not sure why (nothing happens, no duration picker shows). As an alternative, I thought I could maybe simply load the library in the traditional way in the head of index.html. But I'm not clear what the src URL should be for a file in the assets directory. Or should it be in the assets/public directory?
Honestly, you might as well use the npm package, if you are using Vue CLI, to save yourself a lot of trouble:
npm i html-duration-picker
DOCUMENTATION.md is where the installation instructions lie. While there aren't any for Vue, there are instructions for Angular, and it's fairly easy to get it working for Vue.
Just import html-duration-picker:
import * as HtmlDurationPicker from "html-duration-picker";
...and initalize it in mounted():
mounted() { HtmlDurationPicker.init() }
You can also run HtmlDurationPicker.refresh(); to "update dynamically loaded input boxes." I don't think this is necessary if you use v-model to bind the boxes' values to data properties which update fine from either end.
Here's a sandbox you can check out for more info.
If you do want to import it manually from assets, though, then what you're doing is probably fine (though you might need to add the .js to then end of the path); you'll just have to initialize it.
I have a #vue-cli generated project that I need to port over to a simple "three file" setup (ie only index.html, index.js, and index.css) so I can showcase portions of it on Codepen.
However, I'm having a hard time disentangling the "cli" structure of the app. The main issue seems to be two-fold:
CLI is wired to use single-file components whereas Codepen expects everything to be included "in-line" within the js file
Webpack is working its magic in the background to compile everything together based on CLI's single-file component structure, etc.
For example, within the main.js file, a CLI app imports various Vue related modules, then initializes the Vue instance with
new Vue({
render: h => h(App)
}).$mount('#app')
This, of course, corresponds with the content of the index.html
...
<div id="app"></div>
Right now I'm manually copying and pasting things over into Codepen, but that dev environment is just atrocious for any type of serious editing and manipulation... So that's why I'd like to build it out and test stuff OUTSIDE of Codepen, then paste it all in once I'm happy with the results.
I've tried pulling all of the component code into main.js using the standard Vue.component('<name>', { <options> }) syntax, but it's not playing well...
Any ideas? Thanks for the help, sorry for such a broad question!
PS: OR! Maybe I'm going about it the wrong way. Rather than try to "de-CLI" a CLI app structure, how could I create a simple "three-file" Vue app with the comforts of things like npm run serve with hot-loading to see things in action on the page?
The client will only accept a single *.vue file as deliverable, but I'd like to build the app as a multi-component Vue project. I read about SFCs and I don't know that much about Webpack and all that but they seem to be building a distributable in the form of a .js file.
The final single .vue file should basically inline all other components. My googling attempts have not been very fruitful so far, so maybe a hint or an answer or even a "It's not possible" would be appreciated. Thanks.
I am building a very small application that uses everything from CDNs, including Vue.js, so far everything has worked great, but I want to load another CDN now - this one.
I'm used to that via ES6 (and usually Laravel's stuff takes care of that - do I have any way of including the CDN listed on that page and using including it in my code?
Simply including the CDN via script before everything else didn't work.
You can include the script tags in the index.html or any other html which you use to initialize your root vue component.
I'd like to compile ".vue" components (with contains html/js/css) into JS, but in browser side, without browserify/vuify/webpack or others ...
In a better world, i'd like to include my ".vue" component into my html app, like that, withoud need of compile things, server side:
<script type="vuejs/component" src="myComp.vue"></script>
It should be possible ?! no ?
(And I can't imagine that no one got this idea, or have done it already)
In fact, it's possible with http-vue-loader :
https://github.com/FranckFreiburger/http-vue-loader
It doesn't make sense to compile in the browser when it's so much more efficient to just pre-compile your component locally instead of relying on a visitor's client to do it.
In fact, the answer above regarding vue-http-loader says it's only for use in development and links to this article: https://vuejs.org/2015/10/28/why-no-template-url/
With that said, I created a vue-cli template that lets you pre-compile .vue files into a single .js files you can use in the browser. The single JS file contains the template, script, and styles. It uses webpack, but it's super easy to run and watches your files as you edit them.
$ vue init RonnieSan/vue-browser-sfc my-project
Repo at: https://github.com/RonnieSan/vue-browser-sfc
Instructions are in the README.