Creating the app instance

Then, in Vue 2

In the previous chapter, we briefly introduced the new createApp() function. Now we will use it in our actual app. Here's the original main.js file:

import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
import Modal from './components/Modal.vue'
import './filters'
import './directives'
import axios from 'axios'
import './assets/main.css'

Vue.prototype.$axios = axios

Vue.component('Modal', Modal)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

Now, in Vue 2

Here is a diff of what we would have to change in order to properly create an app in Vue 3:

- import Vue from 'vue'
+ import { createApp } from 'vue'

/*
  rest of lines omitted, we'll get back to them.
*/
-  new Vue({
-   router,
-   store,
-   render: (h) => h(App),
- }).$mount('#app')
+ const app = createApp(App)
+ app.mount('#app')

You probably have a lot of questions:

• We don't router and store to the Vue constructor anymore- how do we resigster these now?
• There's no Vue, so how to add global components, directives and filters?
• There's also no Vue.prototype anymore, so how do we add (well, hack) global instance properties into our app?

In short: this broke most of our global app setup! 🤬

Don't worry, we will cover all of that in the following chapters, and you will hopefully find it's all pretty straightforward.