Zero-build Vue JS apps

2024-12-14

Here is a template for a Vue app that does not require a build step. This is useful for small projects where you want to quickly iterate on a UI without having to setup a build process using Node.js and the NPM package manager. I find this type of zero-build setup especially rewarding when I work on a project for a brief time, deploy it, and then have to come back to it after a few months to make a small change or fix a bug. A few of the benefits I’ve noticed:

All the code is in one place so I don’t have to look across a large code repository to re-learn the structure of the UI.
Vue helps organize the code in a standard way and has great documentation.
The deployment process is to copy the HTML file and any other assets to a server and launch caddy to serve the files.

My typical workflow is to start with the HTML template below and add data, methods, and computed properties as needed. Bootstrap CSS is well-known, documented, and easy to use so it’s a good place to start. Tailwind CSS is another option, but newer versions (v3+) of Tailwind require a build step to generate the CSS file and the last minified CDN version (v2.2.19) is a large 2.93 MB file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- Custom template -->
            <example-component name="Hello Vue!"></example-component>
        </div>

        <!-- Template tags should be defined outside the mounted app (#app) -->
        <template id="example-component">
            <div v-text="name"></div>
        </template>

        <script type="module">
            // Custom Vue component
            const exampleComponent = {
                // The template is defined in the <template> tag
                template: document.getElementById("example-component"),
                props: ["name"],
                data() {
                    return {};
                },
                async mounted() {},
                methods: {},
            };

            const app = Vue.createApp({
                data() {
                    return {};
                },
                computed: {},
                async mounted() {},
                methods: {},
                // Register the custom component
                components: {
                    "example-component": exampleComponent,
                },
            });
            app.mount("#app");
        </script>
    </body>
</html>