Vue Instance Explained — The Root of Every Vue App

In this tutorial, you will learn about Vue Instance Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Every Vue application starts with a Vue instance created by createApp. This instance connects to a DOM element and manages the reactive data, methods, lifecycle, and template rendering.

What You'll Learn

• How to create and mount a Vue app
• Data, methods, and computed properties
• The Vue component tree
• Lifecycle hooks
• Multiple app instances

Why It Matters

Understanding the Vue instance is essential because every component is a Vue instance. All reactivity, event handling, and lifecycle features are tied to the instance.

import { createApp } from "vue";

const app = createApp({
  setup() {
    const greeting = "Welcome to Vue!";
    const currentTime = () => new Date().toLocaleString();
    return { greeting, currentTime };
  }
});

app.mount("#app");

<div id="app">
  <p>{{ greeting }}</p>
  <p>Generated at: {{ currentTime() }}</p>
</div>

Expected output: The page shows the greeting and a timestamp that updates when the component re-renders.