Hello world in Vue.js

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>
  <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:

<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:

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.

<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>
  <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.

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

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

Now the only thing we need to know is to specify the repository that we store our code (Utopiops supports Github, Bitbucket and Gitlab).

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

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.

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.

29

Catégories:

VueJavascript

Tags:

VueJavascriptTutorialBeginners