A Vue3 Tutorial - 01 Using Vue Without a Build Step

One of things I really like about web development is that everything is still pretty simple at it's core. We can make web development as complex as we want but ultimately it's still the same old, same old. I stick with html, css and javascript, using jquery if I need to do anything fancy. I like this because it keeps the code small and plain and there is no set up or maintenance headaches. Anyone can use the browser's inspect tool and start looking at the code. I also try to write code that is simple and straightforward in what it does. After all the goal is that someone else can start making changes if they need to. This system has served me well but now I write more and more applications for the web rather than just websites. The issue now is that code often ends up in a spaghetti state over time. I have tried using various frameworks but such react, angular, svelte and a few others but usually I give them up because of the pain of getting started with them.

These frameworks have a build step and require a build toolchain which usually is an extra load. I can see how they are useful and development is quite fun once you get everything going but getting to that step is a barrier than I would rather just not have. Now that I'm giving vue a shot, I think I've found a framework that does pretty much exactly what I want!

It can be used without a build step and it enforces a structure to your code that makes sense. There is the cost of shipping over an entire framework but I'm lucky enough all the applications I work on are internal projects in the first world.

This is still only the first few days of me using Vue and I haven't done too much with it yet but I think it will be helpful to lay out how I've built my test project. It'll be interesting to come back later and see how I feel about vue.

The github has the code:

https://github.com/Krowemoh/vue3-without-build

First Steps

The first step is to get our base index.html page running.

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vue3 Test</title>
        <link rel="icon" href="data:;base64,=">
  </head>
  <body>
        <h1>Hello, World!</h1>
  </body>
</html>

Here we have our base html page.

Now let's add vue. The great thing is we can simply include the vue file like jquery and we can begin using the framework.

    <body>
        <script src="https://unpkg.com/vue@3"></script>

        <div id="app">
            <h1>Hello, {{name}}!</h1>
        </div>

        <script>
            Vue.createApp({
                data() {
                    return {
                        name: 'Nivethan'
                    }
                }
            }).mount('#app')
        </script>
    </body>

Voila! We actually have a pretty good showing of how vue works now. We use the createApp function in Vue to set up the application and one of the things we do is we set up the data function. This data function is where variables relevant to our code will exist. We then mount our Vue application to the specific element in out html by using the id.

Magically, the name attribute in data is now matched to the name in out h1 tag. The curly brackets are used for interpolation which means that the stuff inside the brackets is evaluated and replaced with its true value. This is very much traditional templating.

Blog

A Vue3 Tutorial - 01 Using Vue Without a Build Step

Nivethan

First Steps

Join Our Newsletter. No Spam, Only the good stuff.

Related