Vue.js single file components WITHOUT a build process

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/

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.

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/[email protected]/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/

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.