Hello (World) Vue.js

Photo by Paul Skorupskas

I've always fancied having a go at making something with the Vue.js framework and after going through a few tutorials myself, I quite like the look and feel of it.

I thought I would keep a record of what I'm learning about Vue in-case it helps someone else and to try and get things straight in my head.

Hello World app

So the point of this article is to get a simple 'Hello World' Vue app setup and outline how to get set up with Vue.

To make this an absolute quick-start, let's set up an HTML template with the Vue framework loaded from an external script (this is how they recommend to do it on the main documentation pages).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>

With the base template setup, let's add an entry point or rather a place in the DOM to mount our Vue app.

<body>
  <div id="app">
    {{ welcome }}
  </div>
</body>

In addition to this, we've added an interpolated string (or data binding if you will) with double curly-braces inside our app entry point. This will get replaced with a data item from our Vue app when we create a new Vue object in the next step.

Creating a Vue app

To create a new Vue app we make a new Vue object and pass in a few options as an object.

<script>
        const app = new Vue({
            el: '#app',
            data: {
                welcome: 'Hello From Vue',
            }
        });
</script>

The el property is a CSS selector of where the Vue app should be mounted
The data property holds a list of all the data bindings we want to use in our HTML

As you can see from the example above, we're creating one data property, welcome that holds a string. This is what will replace the {{ welcome }} data binding in the HTML.

Screenshot 2021-02-18 at 19.48.02.png

All being well, if you open up your HTML document, you should see the message being displayed as above.

Try changing the value stored in the welcome property to see how it updates the resulting HTML.

The full code should look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello (World) Vue</title>

</head>
<body>
    <div id="app">
        {{ welcome }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                welcome: 'Hello From Vue',
            }
        });
    </script>
</body>
</html>

Summary

So to create a Vue app we need:

An entry point in our HTML (an empty <div> with an id or class)
To load the Vue framework via a CDN
Create a new Vue object, specifying the entry point selector and any data we want to use

There are of course different ways to install Vue.js alongside other tools like Webpack which I'll cover in another article.

Thanks for reading!

Follow me on Twitter (@codebubb) for more articles.

Hello (World) Vue.js

My experiences learning Vue.js

Hello World app

Creating a Vue app

Summary