Creating a Vue Application
Every Vue 3 application begins with a single call to createApp(), which takes a root component and returns an application instance. That instance is then mounted onto a DOM element, at which point Vue takes over rendering and reactivity for everything inside that element. In modern Vue development, you rarely write this bootstrapping code from scratch — instead you scaffold a project using create-vue, the official project generator built on top of Vite, which sets up the build tooling, optional TypeScript support, routing, state management, linting, and testing in a guided CLI prompt.
Cricket analogy: createApp() is like naming a captain (root component) and forming a squad around them, but the app instance only truly starts once it takes the field (mount); teams rarely build a squad from scratch by hand — they use a structured trial camp (create-vue) that sets up training facilities, kit, fitness testing, and selection criteria in one guided process.
Scaffolding with create-vue and Vite
Running npm create vue@latest launches an interactive prompt that asks whether you want TypeScript, JSX support, Vue Router, Pinia, ESLint, Vitest, and Playwright/Cypress for end-to-end testing. The generated project uses Vite as its dev server and bundler, which provides near-instant server start and hot module replacement by leveraging native ES modules during development and Rollup for production builds. This has effectively replaced the older Vue CLI (webpack-based) as the recommended starting point for new Vue 3 projects.
Cricket analogy: Running npm create vue@latest is like a franchise's pre-season setup interview, asking whether you want video analytics (TypeScript), a specialist spin consultant (JSX-style flexibility), a dedicated travel logistics manager (Router), a central team fund tracker (Pinia), a discipline code enforcer (ESLint), a fitness testing protocol (Vitest), and full match simulations (Playwright/Cypress) — replacing the old manual scouting-and-paperwork setup (Vue CLI/webpack) with a fast, guided modern process (Vite/Rollup).
The Root App Instance and Mounting
The createApp() call returns an app instance that exposes a chainable API for registering global components, directives, and plugins (app.component(), app.directive(), app.use()) before the application is mounted. Mounting is the final step: app.mount('#app') tells Vue to take over the DOM element matching that selector and render the root component's template into it. Everything registered on the app instance before mount() — global components, plugins like Vue Router or Pinia — becomes available throughout the entire component tree via dependency injection.
Cricket analogy: The app instance's chainable setup — app.component(), app.directive(), app.use() — is like a captain finalizing the squad list, ground rules, and sponsor kit before the toss, and app.mount('#app') is the toss itself, after which every registered player and rule is available to the entire team throughout the innings via the dressing-room briefing (dependency injection).
// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')Unlike Vue 2, where a single global Vue constructor configured every root instance on a page, Vue 3's createApp() produces an isolated app instance. This means you can mount multiple independent Vue applications on the same page, each with its own plugins and global configuration, without them interfering with one another.
A common mistake is registering plugins (app.use(router), app.use(pinia)) after calling app.mount(). While this sometimes appears to work for simple cases, plugins should always be registered before mount() to guarantee they are fully initialized before any component renders and tries to use them.
- Every Vue app starts with createApp(RootComponent), which returns a chainable app instance.
- npm create vue@latest scaffolds a new project via the official create-vue generator.
- Vite powers the dev server and build process, replacing the older webpack-based Vue CLI.
- app.use(), app.component(), and app.directive() register global features before mounting.
- app.mount('#app') attaches the app instance to a DOM element and starts rendering.
- Vue 3 allows multiple independent app instances to coexist on a single page.
Practice what you learned
1. Which function is used to create a Vue 3 application instance?
2. What build tool does create-vue use by default for new projects?
3. What must happen before calling app.mount()?
4. What is a key architectural difference between Vue 3's createApp() and Vue 2's global Vue constructor?
5. Which command scaffolds a new official Vue 3 project?
Was this page helpful?
You May Also Like
What Is Vue.js?
An introduction to Vue.js as a progressive JavaScript framework for building user interfaces, covering its design philosophy and how it compares to React and Angular.
The setup() Function and <script setup>
Learn the entry point of the Composition API — the setup() function — and how <script setup> compiles away its boilerplate.
Vue Router Basics
Learn how Vue Router maps URLs to components, enabling single-page applications to feel like multi-page sites without full browser reloads.
Pinia Basics
Get started with Pinia, Vue's official state management library, covering stores, state, and how components read and mutate shared data.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics