Vue.js Instance

In Vue.js 3, applications begin by creating an app instance using the createApp method. This instance is the entry point of your Vue application and serves as the link between your HTML structure and JavaScript logic. Vue's powerful reactivity system ensures your interface stays updated whenever data changes.

What is a Vue Instance?

In Vue 3, the traditional new Vue() constructor is replaced with the createApp() function. This function initializes your application and mounts it to a specific DOM element. It enables you to define reactive data, methods, computed properties, watchers, and lifecycle hooks—all while ensuring the DOM automatically updates when data changes.

How to Create a Vue Instance

To set up a Vue.js 3 application, follow these steps:

  1. Include Vue 3 via CDN or install it with a build tool.
  2. Use Vue.createApp() to define the app.
  3. Mount it to an HTML element using .mount().

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 App Instance Example</title>
</head>
<body>
  <div id="app">
    <p>{{ greeting }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>

  <!-- Vue 3 CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

  <script>
    const { createApp } = Vue;

    // Create the app instance with options
    createApp({
      data() {
        return {
          greeting: 'Hello, Vue 3!'
        };
      },
      methods: {
        changeMessage() {
          this.greeting = 'Message updated!';
        }
      }
    }).mount('#app'); // Mount the app to the DOM
  </script>
</body>
</html>

In this setup, .mount('#app') specifies the target element, data() returns the reactive state, and methods defines functions that modify the state. Vue tracks the data and automatically updates the view whenever the state changes.

Important Properties in the Vue 3 App Instance

Vue 3 supports several options that define how your app behaves:

Property Description
data() Returns the reactive state object. Vue automatically tracks changes and updates the view.
methods Contains functions to respond to user events or manipulate data.
computed Holds derived data that updates automatically when dependencies change.
watch Lets you perform actions when specific data properties change.
mounted Lifecycle hook that runs after the app is attached to the DOM.

Vue 3 Lifecycle Hooks

Vue app instances go through a series of lifecycle stages. Common hooks include:

  • created() – Executes after data and events are initialized.
  • mounted() – Runs when the app is mounted to the DOM.
  • updated() – Triggers when reactive data changes and the DOM is updated.
  • unmounted() – Called just before the app is removed from the DOM.

These hooks help you manage your app's behavior during different stages.

Conclusion

In this tutorial, you learned how to create a Vue.js 3 application instance using the createApp method. You discovered how to define reactive state using data(), add functionality with methods, and mount the app to the DOM using .mount(). You also explored key instance properties and lifecycle hooks that help manage your application's behavior. Understanding these fundamentals gives you a strong starting point for building reactive and interactive web interfaces with Vue.js 3.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram