vueloader
Load .vue files directly from your html/js. No node.js environment, no build step.
examples
my-component.vue
<template> <div class="hello">Hello {{who}}</div></template> <script lang="babel">module.exports = { data: function() { return { who: 'world' } }}</script> <style lang="less">.hello { background-color: #ffe;}</style>index.html
More examples
using VueLoader()
...or, using VueLoader.register()
...or, using VueLoader as a plugin
...or, using an array
new Vue({
components: [
'url:my-component.vue'
]
},
...
Features
<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).
API
VueLoader(url)
url: any url to a .vue file
VueLoader.register(vue, url)
vue: a Vue instance
url: any url to a .vue file
VueLoader.httpRequest(url)
This is the default httpLoader.
Use axios instead of the default http loader:
VueLoader.httpRequest = function(url) {
return axios.get(url)
.then(function(res) {
return res.data;
})
.catch(function(err) {
return Promise.reject(err.status);
});
}
VueLoader.langProcessor
This is an object that contains language processors related to the lang 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:
<script src="http://coffeescript.org/v1/browser-compiler/coffee-script.js"></script><script src="VueLoader.js"></script> <script> VueLoader.langProcessor.coffee = function(scriptText) { return window.CoffeeScript.compile(scriptText, {bare: true});} </script> ## How it works 1. http request the vue file1. load the vue file in a document fragment1. process each section (template, script and style)1. return a promise to Vue.js (async components)1. then Vue.js compiles and cache the component