Vue Get Started

Vue Get Started: Vite Tooling and Application Mounting

To start a modern Vue 3 project, use Vite through the official create-vue scaffolding tool. Vite gives you instant dev server startup, fast Hot Module Replacement (HMR), and optimized production builds.

Every Vue application starts by creating an app instance with createApp() and mounting a root component onto a target HTML element. Once mounted, Vue takes over rendering everything inside that container.

flowchart TD
    A["src/main.js"] --> B["createApp(App)"]
    B --> C["Register Plugins and Components"]
    C --> D["app.mount('#app')"]
    D --> E["HTML Target div#app"]

Initializing a Vue 3 Project

Run these commands in your terminal to scaffold a new app, install dependencies, and start the local development server.

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Entry Point and Root Component

The index.html file provides the host <div id="app"></div> element and loads src/main.js as an ES module. Inside src/main.js, you pass App.vue to createApp() and call .mount('#app').

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Application</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';

const app = createApp(App);

// Register plugins or global components before mounting
app.mount('#app');

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

const projectName = ref('My First Vite Vue App');
</script>

<template>
  <main class="container">
    <h2>{{ projectName }}</h2>
    <p>Edit App.vue and save to see instant hot reload.</p>
  </main>
</template>

Common Mistakes

• Calling app.mount() Too Early: Register plugins like Vue Router or Pinia with app.use() before calling app.mount('#app'). Plugins registered after mounting will not attach properly.
• Using Deprecated Vue CLI: Avoid vue create from legacy vue-cli, which is in maintenance mode. Always choose npm create vue@latest for new projects.
• Missing Target Selector: Make sure the selector in app.mount('#app') matches an existing element ID in index.html.

Frequently Asked Questions

What Node.js version do I need for Vite and Vue 3?

You should install a current Long-Term Support (LTS) release of Node.js, such as Node 20 or 22. Vite checks your Node version when running npm create vue@latest.

Can I mount multiple Vue apps on one HTML page?

Yes, you can call createApp() multiple times and mount each instance to a different DOM element ID. This helps when adding interactive widgets to server-rendered pages.

What happens to content inside <div id="app"> after mounting?

Vue replaces the inner content of #app with the rendered template of your root App.vue component. Any placeholder text inside #app disappears once Vue mounts.