A Vue3 Tutorial - 08 Vue Components without a Build System 2 (A Better Way)

Once again bit by the bug of not reading the manual enough! I ended up spending time at the car dealership with time to kill and read the vue guide. Eventually I got to the part about components and found that you could already load vue components in the browser without a build system!

After giving it look, it seemed like exactly what I want with 1 major drawback from what I can tell. instead of writing .vue file you'd need to write a js file. Besides that, it seems pretty much the same. The big gain here would be the fact that you don't need to ship vue3-sfc-loader and it would cut out some of the code in the main file.

First, we can convert our table.vue file to table.js. Next we move the styles in table.js to the index file. I haven't figured out how to do styles scoped to a component yet.

Now the next step is to put the template tag inside a javascript variable. We can easily do this by using template literal strings.

const template = `
    <div v-if="workers.length === 0">No workers available.</div>

    <div v-else>
        ...
    </div>
`;

export default {
    props: ["headers", "workers",],
    data() {
        return {
            sortColumn: "",
            order: "ASC",
            searchString: "",
        }
    },
    template: template,
    ...
}

We also set the template property on our Vue config object that we export out.

With that, we are done setting up our component for use in the browser. The changes are pretty superficial, so changing this to be a .vue file would be very easy.

The next thing to do is we'll load our component in our index file.

<script>
    Vue.createApp({
        data() {
            return {
                headers: [],
                workers: [],
            }
        },
        components: {
            'Table': Vue.defineAsyncComponent( () => import('./table.js'))
        },
        template: `<Table :headers="headers" :workers="workers"></Table>`,
        methods: {
            ...
        },
        mounted() {
            this.getWorkers();
        }
    }).mount('#app')
</script>

Here we can remove all the code relevant to vue3-sfc-loader and just set up the components variable to reference our table.js file.

With that we have the ability to use components in the web!

This is much simpler! Vue has a great guide, not quite at the level of some of the best documentation but its pretty thorough and explains things well. I should have read it earlier as I did learn quite a bit.