How to create an application instance | Vue 3

This is an introduction to “Creating a Vue 3 application instance”, I will probably not cover Vue 2 because, why would you want to use Vue 2 now that we have Vue 3?

Now to get started we need to use the createApp function in Vue 3 to create an application instance, this is a simple and straightforward process.

Root Component

The createApp function takes a root component as an argument, which is a single-file component that serves as the entry point for your Vue app.

To create an application instance using the createApp function, you need to start by importing the Vue library and the root component for your app as the example shows:

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

The root component is typically a single-file component that contains your Vue app’s HTML, CSS, and JavaScript.

As the main entry point for the rest of your Vue app, it is typically the highest level component.

You can use the following code to create an application instance using the createApp function and the root component:

const app = createApp(App)

The code above creates a new Vue instance and mounts the root component to the element specified by the el option in the root component’s options object.

Mounting App

Usually, I like to use IDs to mount Vue applications, but you can also use classes, in case you need to mount the same component many times like for example in a to-do list.

You can use the mount method of the createApp object to mount the Vue app to a particular element in the HTML page:

app.mount('#app')

This will mount the Vue app to the element that contains the #app id in the HTML page.

You can also use the createApp object to configure and control the Vue app using the various methods it provides. For example, you can use the provide and inject methods to share data and functionality between different parts of the Vue app.

I don’t want to go too deep into the createApp methods yet because I want to create a blog series of all the cool things you can do with Vue and try to explain the concepts as simply as I can.

If you are really interested in provite / inject you can read this article I wrote or this guide by Vue.js.

Hope this was useful information, if you want to contribute go ahead and leave a comment, it could help a lot of people.