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 */
})

This createApp function takes the root component for your appliaction.

---

The Root Component

The root component is the top-level component that contains all other components. For example, If you are using Single-File Components, you will import the root component from another file:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application’s component tree might look like this:

• DirectoryApp(root component)

  • DirectoryTodoList

    • DirectoryTodoItem

      • TodoDeleteButton
      • TodoEditButton
  • DirectoryTodoFooter

    • ClearTodosButton
    • TodoStatistics

In later sections of the guide, you will learn how to define and compose multiple components together. Before that, you will focus on what happens inside a single component.

---

Mounting the App

An application instance needs .mount() method to render the application. It expects a “container” argument, which can either be an actual DOM element or a selector string:

app.mount('#app')

The content of the app’s root component will be rendered inside the container element. The container element itself is not considered part of the app.

Mounting Point

The .mount() method should be called after all app configurations and asset registrations are done.

Also note that its return value is the root component instance, not the application instance.

---

In-DOM Root Component Template

Vue

  import { createApp } from 'vue'

  const app = createApp({
    data() {
      return {
        count: 0
      }
    }
  })
  app.mount('#app')

HTML

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

Preview

Count is: 0

Vue will automatically use the container’s innerHTML as the template if the root component does not already have a template option.

In-DOM Templates

In-DOM templates are often used in applications that are using Vue without a build step.

They can also be used in with server-side frameworks, where the root template might be generated dynamically by the server.

---

App Configurations​

The application instance exposes a .config object that allows you to configure a few app-level options, for example, defining an app-level error handler that captures errors from all descendant components:

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

The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:

app.component("TodoDeleteButton", TodoDeleteButton);

This makes the TodoDeleteButton available for use anywhere in our app. You will learn more about registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its API reference.

App Configurations

Make sure to apply all app configurations before mounting the app!

---

Multiple application instances

You are not limited to a single application instance on the same page. The createApp API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:

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

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

If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.