Vueify.js: Browser Loading .vue Files

I wrote a Vue plugin for browser loading .vue files. Should be handy for developers who want to keep their stack light.

Vueify.js is an attempt to recreate the desired behavior of Vueify in browser environment thus the suffix .js to indicate it is a frontend library.

Usage:

Include vueify.js to your html, then initialize the plugin with Vue.use().

<script src="vueify.js"></script>
Vue.use(Vueify);
var app = new Vue({ ... });

Static Loading .vue file via <script> and register it as a global component

Set type='vue' for our script tags, because browser won’t automatically load content in script tags with unknown type.

<script src="Hello.vue" type='vue'></script> // component name with be default to 'hello'
<script src="Hello.vue" type='vue' name='custom-name'></script>

Dynamic Loading .vue file

Just like import() but works with *.vue

var component1_option = await Vue.importSFC('./component1.vue');
var app = new Vue({
  components: {
    component1: component1_option,
    component2: () => Vue.importSFC('./component2.vue'),
  },
}

Cheers.