The Vue 3 Application Instance Tutorial

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

If you want to follow along with the examples in this lesson, you will need a default app generated by the Vue CLI . If you already have one from the previous lesson, you can use it instead.

The Vue Application Instance

The Vue application instance (also known as the Vue App) is what controls a Vue application. We use it to register any globals used by the app or its components.

The instance is typically linked to an HTML element (like a div) and any content within that element is controlled by Vue.

Let’s take a closer look at the app instance and mounting by opening the following files from our project.

• src/main.js
• public/index.html

We’ll start with the index.html file. If we open it up, we should see a div just before the closing body tag.

...
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
...

That’s where Vue will be rendering the application’s content. The id is a way for us to tell Vue which element we want it to use.

When we use the Application API, the convention is to use the <div id="app"> element but it can be anything you want, like <article class="my-app"> .

tip When we generate a new project with the Vue CLI, it will automatically add the div for us and set up the application instance to use it.

Next is the main.js file where we set up and configure the instance. It will look similar to the following.

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

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

The file contains two imports and a chained function set.

1. The first import brings in the createApp method from the core ‘vue’ package. It takes a component as an argument, in this case the root App component from src/App.vue , which is why it’s imported as well.

Vue will look inside the component and find the config object in its script block, which it will use as the configuration.

2. Once the instance has been created, we need to tell Vue where to mount it in the DOM. To do this, we use the id of the div in the index.html file.

tip The mount function takes any valid Javascript querySelector .

Alternative setup

In some projects, the function chain set may be split up. This is often done when a project uses plugins like Vuex or the Router to make it easier to see at a glance what’s going on.

import { createApp } from 'vue'
import store from './store/index'
import router from './router/index'
import App from './App.vue'

// create app instance
const app = createApp(App)

// use plugins
app.use(store)
app.use(router)

// use app instance to
// mount to <div id="app">
app.mount('#app')

We’ll leave our example the way it is until we cover plugins.

The Configuration Object

As mentioned earlier, the Vue App configures a component with the config object. This is simply an object that holds the data, methods, properties etc. for our component’s Logic.

When we created our first app , we made a config object with some dynamic data.

<script>
export default {
  data() {
    return { name: 'John' }
  }
}
</script>

Notice that we’re exporting the object in the example above. That’s because it needs to be imported into the main.js script to be passed to the createApp method.

Let’s take a quick look at the export process.

We start by using the export keyword before we define the object.

export {}

The export statement requires us to specify the type of export. There are two types.

1. A named export is used when we need to export more than one thing, like multiple functions from the ‘vue’ package.
2. A default export is used when we only need to export one thing, like a configuration object from our component.

So we need the default export in this case. To use it, we just specify the default keyword after the export keyword in the statement.

export default {}

We will learn about all the options that we can use in the config object in the following lessons.