Inspired by Franck Freiburger's http-vue-loader.
VueInBrowserLoader(url)
Loads a .vue file from the given URL and compiles it to a component directly in the browser. Already loaded components are cached.
no dependencies
npm i vueinbrowserloaderimport VueInBrowserLoader from 'vueinbrowserloader';<script src="https://unpkg.com/vueinbrowserloader"></script>new Vue({
/*...*/
components: {
'my-tiny-component': VueInBrowserLoader('/vue-components/my-tiny-component.vue'),
'my-component': VueInBrowserLoader('/vue-components/my-component'),
// resolves to '/vue-components/my-component/index.vue'
},
});Use relative URLs.
<!-- /vue-components/my-component/index.vue -->
<template>
<p><!--...--></p>
</template>
<script>
module.exports = {
/*...*/
components: {
'my-nested-component': VueInBrowserLoader('./my-nested-component'),
// resolves to '/vue-components/my-component/my-nested-component/index.vue'
'my-general-component': VueInBrowserLoader('../my-general-component'),
// resolves to '/vue-components/my-general-component/index.vue'
},
});
</script>Separate files.
<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.layout.css"></style>
<style src="./style.theme.green-forest.css"></style>- scoped style
- preProcessors
- postProcessors