Hello world in Vue.js
Tags: vue, javascript, tutorial, beginners
Published: 2022-01-07 01:19:18

So you've heard the name Vue.js, at least I assume so otherwise you wouldn't be here. Also you might have heard how powerful, yet simple it is. In this post, which is the first on in a series of posts about Vue.js, I'll show you the basic steps to get started with Vue.js, and print the message we all look forward to seeing, the glorious "Hello, world!".

Let's start by creating a file named `index.html` and import Vue in the `head` tag like this:

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

Now that we can use Vue, let's use Vue's template syntax to render our message:

``` html
<body>
  <div id="app">{{ message }}</div>
</body>
```
Notice that here we have a special syntax which is different from our usual html: `{{ message }}`. Here we are just rendering the value of variable named `message` exactly where the template is placed. 

All we need to now is to create an instance of Vue and attach it to our HTML tag. To reference the tag I've given it an arbitrary id `app`. Let's do this by creating a file named `index.js`:

``` javascript
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
})
```
In this code we have created a new instance of Vue, have specified an element to attach to, and the data that is available to be used in our templates.

It's worth mentioning that `#app` refers to an html element with the id of `app`.
As the last step we just import `index.js` lin our html page. Just make sure you import it right before your closing `body` tag.

``` html
  <script src="./index.js"></script>
</body>
```
This is all we need to render our message with Vue and this is how our complete `index.html` looks like:

``` html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="./index.js"></script>
  </body>
</html>
```

Now that we have our code ready, let's deploy it on  [utopiops](https://www.utopiops.com). 

Head over to the `Fully managed applications` section as we want to use free static website deployment and hosting that Utopiops offers.

![Screen Shot 2021-12-31 at 8.16.15 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944738538/QMMZQKUtp.png)

Now we choose `Static website` as the application type to be created. (Utopiops also offers free plans for `Function` and `Dockerized` applications)


![Screen Shot 2021-12-31 at 8.16.35 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944848567/j_pE1HukP.png)

Now the only thing we need to know is to specify the  [repository](https://github.com/mkamrani/alpinejs-helloworld-utopiops)  that we store our code (Utopiops supports Github, Bitbucket and Gitlab).

Remember we don't need to provide any build command!

![Screen Shot 2022-01-07 at 12.11.04 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641517871517/Cgn_KwzFD.png)


And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.

https://vuejs-hello-world-e9d16563.sites.utopiops.com

Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.


You can find the source code  [here](https://github.com/mkamrani/alpinejs-helloworld-utopiops).