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

I'm absolutely certain this doesn't exist yet, because while it might seem relatively easy, certain functionalities would make it quite difficult to implement. For example:

1. You don't necessarily import just other .vue components, you can import random external dependencies. Which means that the browser now needs to download and parse npm modules, handle their dependencies, etc.
2. Different sections of your .vue component (template, logic and style) can be written in languages other than HTML, JS and CSS. Which means the browser now also needs to download a compiler/transpiler for Jade, CoffeeScript, LESS or whatever else you're using and run your code through it. Mind, there's no guarantee that such a transpiler written in JavaScript actually exists, because a node module used in a regular build process could be just a wrapper for some external library which can't be run in a browser.
3. Styling in a .vue component can be scoped, which means that you now need to parse the template of a component to insert randomly generated IDs as element attributes AND parse the styling of the same component to insert those same IDs in your CSS selectors so that your styling ends up being scoped.

And those are just the most obvious ones off the top of my head. Sure, you could severely limit yourself and not use any of those features, but then it's not really a .vue component anymore, is it?

If you really want to avoid a build process at all costs and are willing to accept the limitations of not using any of the features above, why not just use a single JS file:

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

You have to load them in the correct order, but there you have it, a poor man's single file component.

Answer 2

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/

Answer 3

It's 2020 and Evan You wrote https://github.com/vuejs/vite just last week.

I'd love to know if anyone has come across a client-side (only) solution...

Vite has a server, but it feels like the old days of Web when we just had Notepad. I had run the demo in less than 5 minutes, it's that easy.

• it covers or aims to cover the finer details that @mzgajner mentions

For now, I would say that it's only gotcha is that you are in Vue 3 beta realm right away if you use it. No Vue 2.x.

Answer 4

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

I share the sentiment and decided to solve this problem with vue-blocks. Just a single script tag to get going, no build tools required, completely client-side.

It can load vue files (with some limitations though) from the server jsfiddle example:

<template src="path/to/vue-file.vue"></template>

Vue Blocks allows you to write multiple vue components in the html document, like so:

<template component="sample-component">
    <div>
        <h1>Sample component</h1>
    </div>
    <style>
    </style>
    <script>
        export default {
            data() {
                return {}
            },
            mounted() {},
            methods: {
                xx() {

                }
            }
        }
    </script>
</template>

A working demo in jsfiddle: https://jsfiddle.net/o48L0y9j/