Vue.js First Application

We have already learned that Vue.js is an open-source JavaScript framework used for building single-page web applications. The core library of this framework is mainly focused on the view layer only. Vue.js is mainly developed for frontend development. Here, we are going to use the HTML, JavaScript, and CSS files to build the first application of the Vue.js framework.

Let us start to create a project on Vue.js using NPM. This example explains how we can use the Vue.js framework to develop an application.

Index.html

It is the app main file which is responsible for user interface.

<!DOCTYPE html>
 <html>
   <head>
     <meta charset= “utf-8”>
     <meta name= “viewport" content="width=device-width,initial-scale=1.0”>
     <script src= “https://unpkg.com/[email protected]/dist/vue.js”></script> 
     <title>My Vue Project</title>
   </head>
   <body>
     <div id= “app”> 
       {{message}}
     </div>
   </body>
 </html>

Main.js

It is the main JavaScript file which is used to drive the whole application. Here, we must have to import the Vue.js library and App component.

import Vue from ‘vue’
 import App from ‘./App’
 import router from ‘./router’
 Vue.config.productionTip = false
 /* eslint-disable no-new */
   new Vue ({ 
     el: “#app”,
     data: {
       message: “This is my First Code of Vue.js”,
     }
   });

Run the App

Finally, run the app. After executing this code, we will get the output on this http://localhost:8081/vueIndex.html/#/ localhost, as shown below. If we edit anything in the source code, it will be immediately reflected in the output.

Now, our first vue.js app is created successfully. In this example, we have seen that it includes an unpkg of NPM at the start of the html file in the <script> tag. See the below line:

<script src= “https://unpkg.com/[email protected]/dist/vue.js”></script>

There is a <div> tag which added in the body of html file to display the output “This is my first code of Vue.js” in the browser. The below code shows how we can use the <tag> in the body of the html file.

  <div id= “app”>
       {{message}}
     </div>

We have added a message in the interpolation, i.e. {{}}. It interacts with Vue.js and displays the output in the browser. The below code shows how we can add a message in the interpolation of the html file, and this code always written in the <script> tag.

  new Vue ({
     el: “#app”,
     data: {
       message: “This is my First Code of Vue.js”,
     }
   });
     </script>

In the above code snippet, we take an instance of Vue.js example. It takes the id of the DOM element, i.e., el: “#app”, which is also the id of the <div>. Here we are going to use the console in the web browser where we can change the code, and the output will be reflected on the same browser. To open the console on the Web browser, press F12 key or Ctrl + Shift + I key.

The below example explains how we can use the console in the Web browser to change the output of the code. Here, we have changed the message using a console, like “This is my first code of vue.js” to “My first code of Vue.js is an excellent” that will be reflected in the preview screen. It can be shown in the below screenshot:

← Prev Next →