0.0.3 • Published 6 years ago
vueloader v0.0.3
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
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vueloader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': VueLoader('my-component.vue')
}
});
</script>
</body>
</html>More examples
using VueLoader()
...
<script type="text/javascript">
new Vue({
components: {
'my-component': VueLoader('my-component.vue')
},
...or, using VueLoader.register()
...
<script type="text/javascript">
VueLoader.register(Vue, 'my-component.vue');
new Vue({
components: [
'my-component'
]
},
...or, using VueLoader as a plugin
...
<script type="text/javascript">
Vue.use(VueLoader);
new Vue({
components: {
'my-component': 'url:my-component.vue'
},
...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 instanceurl: 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 file
1. load the vue file in a document fragment
1. 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