VueInBrowserLoader

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.

dependencies

no dependencies

setup

npm

npm i vueinbrowserloader

ES module

import VueInBrowserLoader from 'vueinbrowserloader';

browser

<script src="https://unpkg.com/vueinbrowserloader"></script>

usage

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>

todo

• scoped style
• preProcessors
• postProcessors