- Notifications
You must be signed in to change notification settings - Fork274
load .vue files from your html/js
License
FranckFreiburger/http-vue-loader
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🎉http-vue-loader evolved intovue3-sfc-loader that supports Vue2 and Vue3 🎉
(see theannouncement)
Load .vue files directly from your html/js. No node.js environment, no build step.
my-component.vue
<template> <divclass="hello">Hello {{who}}</div></template><script>module.exports= {data:function() {return { who:'world' } }}</script><style>.hello {background-color:#ffe;}</style>
index.html
<!doctype html><htmllang="en"><head><scriptsrc="https://unpkg.com/vue"></script><scriptsrc="https://unpkg.com/http-vue-loader"></script></head><body><divid="my-app"><my-component></my-component></div><scripttype="text/javascript">newVue({el:'#my-app',components:{'my-component':httpVueLoader('my-component.vue')}});</script></body></html>
usinghttpVueLoader()
...<scripttype="text/javascript"> new Vue({ components: { 'my-component': httpVueLoader('my-component.vue') }, ...
or, usinghttpVueLoader.register()
...<scripttype="text/javascript"> httpVueLoader.register(Vue, 'my-component.vue'); new Vue({ components: [ 'my-component' ] }, ...
or, usinghttpVueLoader as a plugin
...<scripttype="text/javascript"> Vue.use(httpVueLoader); new Vue({ components: { 'my-component': 'url:my-component.vue' }, ...
or, using an array
new Vue({ components: [ 'url:my-component.vue' ] }, ...<template>,<script>and<style>support thesrcattribute.<style scoped>is supported.module.exportsmay be a promise.- Support of relative urls in
<template>and<style>sections. - Support custom CSS, HTML and scripting languages, eg.
<script lang="coffee">(see VueLoader.langProcessor).
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | ? | ? | Latest ✔ | 9+ ✔ |
- Vue.js 2 (compiler and runtime)
- es6-promise (optional, except for IE, Chrome < 33, FireFox < 29,... )
- webserver (optional)...
Since some browsers do not allow XMLHttpRequest to access local files (Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https),you can start a small express server to run this example.
Run the following commands to start a basic web server:
npm install expressnode -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"url: any url to a .vue file
vue: a Vue instanceurl: any url to a .vue file
This is the default httpLoader.
Use axios instead of the default http loader:
httpVueLoader.httpRequest=function(url){returnaxios.get(url).then(function(res){returnres.data;}).catch(function(err){returnPromise.reject(err.status);});}
This is an object that contains language processors related to thelang attribute of the<script> section.
The language is a simple function that accepts a script source as argument and returns a javascript script source.
Example - CoffeeScript:
<scriptsrc="http://coffeescript.org/v1/browser-compiler/coffee-script.js"></script><scriptsrc="httpVueLoader.js"></script><script>httpVueLoader.langProcessor.coffee = function(scriptText){returnwindow.CoffeeScript.compile(scriptText,{bare:true});}</script>
Then, in you.vue file:
...<scriptlang="coffee">module.exports=components: {}data:-> {}computed: {}methods: {}</script>...
Example - Stylus:
<scriptsrc="//stylus-lang.com/try/stylus.min.js"></script><scriptsrc="httpVueLoader.js"></script><script>httpVueLoader.langProcessor.stylus = function(stylusText){returnnewPromise(function(resolve,reject){stylus.render(stylusText.trim(),{},function(err,css){if(err)reject(err);resolve(css);});})}</script>
...<style lang="stylus">border-radius()-webkit-border-radius:arguments-moz-border-radius:argumentsborder-radius:argumentsforminputpadding:5pxborder:1pxsolidborder-radius:5px</style>...
Sass (SCSS) example. Sincesass.compile() is asynchronous, a promise needs to be returned:
<scriptsrc="sass.js"></script><scriptsrc="httpVueLoader.js"></script><script> httpVueLoader.langProcessor.scss = function (scssText){returnnewPromise(function(resolve,reject){sass.compile(scssText,function(result){if(result.status===0)resolve(result.text)elsereject(result)});});}// ....
...<style lang="scss">$font-stack:Helvetica,sans-serif;$primary-color:#333;body {font:100%$font-stack;color:$primary-color;}</style>
- http request the vue file
- load the vue file in a document fragment
- process each section (template, script and style)
- return a promise to Vue.js (async components)
- then Vue.js compiles and cache the component
The aim of http-vue-loader is to quickly test .vue components without any compilation step.
However, for production, I recommend to usewebpack module bundler withvue-loader,webpack-simple is a good minimalist webpack config you should look at.
BTW, see alsowhy Vue.js doesn't support templateURL.
Due to the lack of suitable API in Google Chrome and Internet Explorer, syntax errors in the<script> section are only reported on FireFox.
About
load .vue files from your html/js
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.