Skip to main content

create a new vue instance

A new Vue instance is created using the createApp method, which is the standard approach in Vue 3. This method takes an options object as an argument, where you define the application's data, methods, components, and other configurations. The instance is then mounted to a specific HTML element in your document using the mount method.
Here's how to create a new Vue instance: HTML Structure.
Create an HTML file with a div element that will serve as the mounting point for your Vue application.
Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Vue App</title>
    </head>
    <body>
        <div id="app">
            <!-- Vue app will be rendered here -->
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="app.js"></script>
    </body>
    </html>
JavaScript File (app.js).
Create a JavaScript file (e.g., app.js) and use createApp to define and mount your Vue instance.
JavaScript
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue!'
            };
        },
        methods: {
            greet() {
                alert(this.message);
            }
        }
    });

    app.mount('#app');
In this example:
  • Vue.createApp({...}) initializes a new Vue application instance.
  • The data option defines reactive data properties (e.g., message).
  • The methods option defines functions that can be called within the application (e.g., greet).
  • app.mount('#app') connects the Vue instance to the HTML element with the ID app
Back to top