Vue Instance

Vue Instance

In Vue 3, this concept is expressed using the createApp() function — it’s how you initialize and mount your application.

🧩 What is the Vue Instance (App)?

A Vue instance (or app) is the root of your Vue project.
It’s the object that:

  • Holds your app’s data, methods, and components.
  • Controls what gets rendered to the DOM.
  • Provides the base configuration for the entire Vue app.

⚙️ Creating a Vue App (Vue 3)

🧱 Example: main.js

This is your entry point.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

🔍 Explanation

  • createApp(App) → creates a new Vue app instance using your root component (App.vue).
  • .mount('#app') → tells Vue where in the DOM to display the app (the element with id app in index.html).

🧱 index.html

This is the HTML “container” that Vue will take over.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Here, the #app div is where your Vue app will render.

🧱 App.vue

Your root component:

<template>
  <h1>{{ message }}</h1>
  <button @click="changeMessage">Click me</button>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello from Vue App!')

function changeMessage() {
  message.value = 'You clicked the button!'
}
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>

🧠 How It Works

  1. Vue takes the HTML structure in <template>.
  2. It creates a reactive connection between the data (ref) and the DOM.
  3. Any time your data changes, Vue automatically updates the DOM.

🧩 Adding Global Configurations (Optional)

You can extend your app instance before mounting it:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)

app.use(router)
app.use(createPinia())

app.mount('#app')

This is how you integrate tools like:

  • Vue Router
  • Pinia
  • Global components
  • Plugins

🧠 Summary

ConceptDescription
createApp()Creates the Vue app instance
.mount('#app')Mounts the app into the DOM
App.vueRoot component of your app
ref(), reactive()Make data reactive
app.use()Add plugins or global features

Leave a Reply