Vue.js Hello World Example

Last updated  

0 Shares

Vue Js Hello World Example is the best way to kick start the learning of Vuejs. Vue.js is the pure frontend development javascript library. It is becoming popular as a JS library for reactive components. It is lightweight, simple, and focused on the view layer only.

Other Vue.js tutorial

Here is the code for Vue Js Hello World example.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
            <title>Vue.js Hello World Example - By Kodehelp.com</title>
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="vuejs-hello-world">
            <h1>{{message}}</h1>
        </div>
        <script src="helloworld.js"></script>
    </body>

</html>

Below code is the javascript part of Vue Js Hello World Example, which enables declarative rendering of data to the DOM using template

var helloWorld = new Vue({
el: '#vuejs-hello-world',
data: {
message: "Hello World!! Enjoy Vue.js Learning."
}
});

Output

Hello World!! Enjoy Vue.js Learning.

In the above example we have create HTML and Javascript file. Below are the step to get the Vue JS Hello World Example up and running

  • Created HMTL boilerplate file.
  • Added Vue.js library in the HTML file.
  • Add id="vuejs-hello-world" to div element. This id can be any text but remember that we will be using this id in the Javascript file.
  • Create the javascript file helloworld.js and import this javascript file in the html at the bottom before closing tag. As we are using the id of div in the javascript file while creating the Vue object it is mandate that the div element is present before the Vue object.
  • Instantiate a new Vue object helloWorld and tell it with el that our app is #vuejs-hello-world div.
  • Finally add data that need to be displayed on the view in data object of the Vue.
  • Open the html file in the browser and you should see the message on the screen.

I hope this gets your Vue Js Hello World Example up and running.