SeregPie / VueInBrowserLoader

Loads a .vue file from the given URL and compiles it to a component directly in the browser.

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

• Vue

setup

npm

npm install vueinbrowserloader

ES module

import VueInBrowserLoader from 'vueinbrowserloader';

browser

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

usage

new Vue({
  components: {
    'MyButton': VueInBrowserLoader('/app/components/Button.vue'),

    'MyDialog': VueInBrowserLoader('/app/components/Dialog'),
     // resolves to '/app/components/Dialog/index.vue'
  },
  /*...*/
});

---

Use relative URLs.

<!-- /app/components/Dialog/index.vue -->
<template><!--...--></template>
<script>

module.exports = {
  components: {
    'MyTitleBar': VueInBrowserLoader('./TitleBar.vue'),
    // resolves to '/app/components/Dialog/TitleBar.vue'

    'MyButton': VueInBrowserLoader('../Button.vue'),
    // resolves to '/app/components/Button.vue'
  },
  /*...*/
});

</script>

---

Separate files.

<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.layout.css"></style>
<style src="./style.theme.GreenForest.css"></style>

todo

• scoped style
• pre-processors
• post-processors