Vue.js single file components WITHOUT a build process

Question

I love vue.js because of its simplicity, which means I can hack a quick one-page SPA with modern, intuitive data-binding syntax and no complex toolchain.

I also love the idea of single-file components which means there is a single place (*.vue file) where each component stores DOM, styling and scripted functionality.

However, I want to use single-file components without wasting time on managing a build process every time I put an app together. In short, I want the benefits of component management without the overhead of a build toolchain, which means letting the browser do the heavy lifting for bootstrapping each *.vue file via XMLHttpRequest and DOM rendering. Making sure that we replace module.exports and import calls with corresponding Vue.component() functionality.

I'd love to know if anyone has come across a client-side (only) solution for using *.vue files on the browser. Surely this has been done already?

Answer 1

Another way is use: http-vue-loader

Load .vue files directly from your html/js. No node.js environment, no build step.

https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js

Same to in unpkg cdn

https://unpkg.com/http-vue-loader

Here a example

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

<script>
new Vue({
  el: '#app',
  components: {
    'header': httpVueLoader('/components/header.vue'),
    'nav-bar': httpVueLoader('/components/navbar.vue'),
    'aside': httpVueLoader('/components/aside.vue'),
    'content': httpVueLoader('/components/content.vue'),
    'footer': httpVueLoader('/components/footer.vue')
  }
});
</script>

Or you can load your components from external like

'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),

See the example at : https://codepen.io/mikechen2017/pen/wEdbBN/