Creating a Vue Application

The Application Instance

Every Vue application starts by creating a new application instance with the createApp function:

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

The Root Component

The object you pass to createApp is in fact a component. Every Vue application requires a "root component", which serves as the top-level container for the entire app.

All other components in the application are organized as children of this root component, forming a component tree.

NOTE

Most real-world applications are organized into a tree of nested, reusable components. The root component sits at the top of this tree and is the component passed to createApp.

If you are using Single-File Components (SFCs), the root component is typically imported from another file:

import { createApp } from 'vue'

// import the root component (App) from a single-file component.
import App from './App.vue'

const app = createApp(App)

App Configurations

The application instance exposes a .config object that lets you configure a few app-level options. For example, you can define a global error handler that captures errors from all descendant components:

app.config.errorHandler = (err) => {
  /* handle error */
}

The application instance also provides several methods for registering app-scoped assets. For example, to add Pinia as the state management solution for your app:

import { createPinia } from 'pinia'

/* App instance creation goes here */

app.use(createPinia())

For a complete list of application instance APIs, refer to the official Application API reference.

Mounting the App

An application instance doesn't render anything until you call its .mount() method. This method tells Vue where to render the app by specifying a "container", which can be either a DOM element or a selector string:

// Pass a DOM element
const container = document.getElementById('app')
app.mount(container)

// OR

// Pass a selector string
app.mount('#app')

Vue renders the root component inside the container element. The container element itself is not part of the app.

NOTE

The .mount() method should always be called after all app configurations and asset registrations are done. And unlike most app methods, .mount() returns the root component instance, not the application instance.

In-DOM Root Component Template

Usually, the root component defines its own template (for example, in App.vue). However, Vue also supports a simpler setup where the template already exists in the HTML:

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

// `template` option is not defined
const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

Because the root component does not define a template here, Vue automatically uses the container’s innerHTML as the template.

This approach is commonly used when using Vue without a build step or when integrating Vue with server-rendered HTML.

Multiple Application Instances

A single page can contain more than one Vue application instance. Each call to createApp creates a separate app with its own configuration and state.

const app1 = createApp({/* ... */})
app1.mount('#container-1')

const app2 = createApp({/* ... */})
app2.mount('#container-2')

Each app controls only the element it is mounted to.

This is useful when adding Vue to an existing or server-rendered page. Instead of mounting one large app on the entire page, you can create multiple small apps, each responsible for a specific section of the page.