How to create instance in Vue.js ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report A Vue.js Instance refers to a Vue constructor's instance in the Vue application. It acts as a container that holds your application's data and methods. Vue.js implements the Component-Based Architecture that enables the generation of these instances, in order to represent and manage individual components or specific sections of the Vue Application. Each Instance is responsible for performing the specific task that enhances the functionality & interface of the web application. In this article, we will learn how to create a VueJS instance. Syntax In the below code snippet, new Vue({...}) initializes a new Vue instance and accepts an object with various options and data properties. const app = new Vue({ setup() { // Your code here } })Vue.JS installation There are the following ways to install Vue.JS: Directly including CDN file<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Install it using NPM Write the following command in the terminal npm install vueApproach To create an instance in VueJS, follow the below steps: Include the Vue.js library in your HTML file using a script tag.Create a new Vue instance by calling new Vue({...})Inside the Vue instance specify the el property and set it to the id of the HTML element you want to bind to.Use the data property to define the initial data and properties you want to use in your application. You can also add methods inside it. Example 1: In this example, we will be creating a simple VueJS Instance that renders the Hello GeeksforGeeks text. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src= "https://unpkg.com/vue@3/dist/vue.global.js"> </script> </head> <body> <div id="app">{{ message }}</div> <script> const { createApp, ref } = Vue createApp({ setup() { const message = ref('Hello GeeksforGeeks') return { message } } }).mount('#app') </script> </body> </html> Output: Example 2: In this example, we will create a simple VueJS instance representing a counter app. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src= "https://unpkg.com/vue@3/dist/vue.global.js"> </script> </head> <body> <div id="app"> <button @click="incrementCount"> Click Me! </button> <p> Button Clicked {{ count }} times </p> </div> <script> const { createApp, ref } = Vue createApp({ setup() { const count = ref(0) const incrementCount = () => { count.value++ } return { count, incrementCount } } }).mount('#app') </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create instance in Vue.js ? S shakirradfcz Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League Vue.JS Geeks Premier League 2023 +1 More Similar Reads How to Set a Unique ID for Each Component Instance in VueJS ? In Vue.js we can assign the unique ID to each of the component instances for properly managing the components in the application. In this article, we will see the different approaches to setting the unique ID for each component instance in VueJS.These are the following approaches:Table of ContentApp 3 min read How to Create Custom VueJS Plugins ? Vue.js is a frontend javascript framework that is used to create web apps and single-page applications. It follows the pattern of creating and using components as the building blocks for the application. Vue.js plugins are the reusable pieces of code, that allow us to abstract out and encapsulate th 2 min read How to Initialize Firebase in Vite and VueJS? Firebase with Vite and Vue Firebase, combined with Vite and Vue, opens up a powerful combination of real-time capability, fast development, and seamless backend integration. Firebase offers a real-time database, authentication, and cloud storage services that vastly reduce having to manage any backe 4 min read How to binding inline styles in Vue.js ? Vue.js is an open-source ModelâViewâViewModel front-end JavaScript framework for building user interfaces and single-page applications. Every Web application needs HTML CSS styles for presenting a better User Interface. Vue.js allows you to dynamically render styling with data model structure. Usual 4 min read Vue.js Instances A Vue.js application starts with a Vue instance. The instances object is the main object for our Vue App. It helps us to use Vue components in our application. A Vue instance uses the MVVM(Model-View-View-Model) pattern. The Vue constructor accepts a single JavaScript object called an options object 2 min read How to Create Tooltip with Vue.js? Tooltips are the styling components used to provide informative or interactive hints when hovering over an element, enhancing user experience, and guiding interactions in web applications. Below are the approaches to creating a tooltip with Vue.js: Table of Content Using Vue DirectivesUsing Vue Tool 2 min read How to Add List Items Onclick in VueJS ? In VueJS, we can make dynamic applications by adding list items on click. This allows for interactive user experiences where new items can be added to a list with a click event. The below approaches can be used to accomplish this task. Table of Content By creating a custom method to Add ItemsUsing I 2 min read v-for Directive in Vue.js v-for directive is a Vue.js directive used to loop over a data usually an array or object. First, we will create a div element with id as app and let's apply the v-for directive to an element with data. Now we will create this data by initializing a Vue instance with the data attribute containing th 1 min read How to Integrate Vite with Vue.js? Vite provides the flexibility and speed needed for modern web development by offering a fast-build tool and development server. Integrating Vite with Vue.js allows developers to use Viteâs efficient hot module replacement and optimized build processes while working with Vue's reactive framework. Thi 3 min read Introduction to Vue.js Instance What are Vue Instances? Vue.js is a frontend JavaScript framework developed by open source developers. It is generally used for building single-page applications. To learn more about VueJS please refer to Vue.js | Introduction & Installation. VueJS does not have the HTML code at runtime, instead 5 min read Like