Set Up Vue.js Environment & Create Vue Instance in 2 Simple Ways

Today’s article will be all about connecting Vue.js in your project.As we know Vue.js is a progressive framework for building user interfaces. As well as Vue.js is easy to integrate to our projects. And here is a simple 2 ways to setup the Vue.js Environment and Create Vue Instance.

Step-1

1. We can connect Vue.js to our project with CDN link-

To connect Vue.js , you have to use the given CDN link in your HTML file in head section.

• For learning purposes, you can use the latest version with:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

• For production purpose and avoid any breakage simply link to specific version and remove /dist/vue.js :

<script src=”https://cdn.jsdelivr.net/npm/vue"></script>

Step-2

1. Create Vue Instance in app.js file. Before Creating Vue Instance we first need to know What is Vue Instance ?

• To start or set Vue Application we first need to create Vue-instance-

What is Vue Instance ?

Vue Instance is a heart of the application. It plugs in to an element in DOM. Its an Object that Vue js Provide us with -

var app = new Vue();

• This Vue Instance Control the HTML Application weather its a certain part of application or whole application.
• Vue Object will take object as Parameter.

var app = new Vue({});

• ele. Property - In this Vue Instance Object we will add ele property, ele property is reserved keyword in Vue which take a string, which tells to Vue which part of HTML is going to controled by Vue Instance.

var app = new Vue({
ele : "root"  // where root is the id of your html page which you want to control by Vue Instance.
});

• data Property - This data property is also a reserved keyword which takes an object, where we store all data for Vue Instanse.This will take key-pair values.

var app = new Vue({
data : {
name : "ABC"
}
});

Creating Vue Instance

• After creating Vue Instance now add this app.js file to html file using script tag and add this name to HTML file.

Use name property into HTML file

• To add name property we use {{}} template string, when we write this template string.

• now run this html file to your browser and you will see name.