A different way to bootstrap and start the application

The way to bootstrap and start our application has changed. It is now required that we import a constructor from the Vue bundle. Let’s compare both implementations from main.js:

Vue 2 application instantiation:

import Vue from "vue"
const app=new Vue({el:"#app"})

In Vue 2, we import the Vue constructor and pass an object with options. In Vue 3, after the application has been created, we attach components, plugins, and so on before mounting our application to the top-level component. Here is the example rewritten for Vue 3:

Vue 3 application instantiation:

import {createApp} from "vue"
const app=createApp({..})
app.mount("#app")

The location of the index.html file has also changed and is now placed at the root of our application. You can see more changes to the document structure in Chapter 3, Setting Up a Working Project.