Summary

What we have so far

Up until this point, we "only" migrated our app's global APIs, the setup for the actual app, the frame, so to speak.

Yet this step is actually very important. Because now, that frame is ready to boot up. We can now focus all of our efforts on the migration of our components. Because our app's backbone is ready to boot, but some of our components likely make use of APIs that changed in ways that will break our app - and that's what we will fix in the next Part of this guide.

But for now: Be proud of the work you did, don't forget to commit your work and push to origin! ☝🏻

Comparing our main 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)

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

import { createApp } from 'vue'

import router from './router'
import store from './store'

import App from './App.vue'
import Modal from './components/Modal.vue'

import addFilters from './filters'
import addDirectives from './directives'

import axios from 'axios'

import './assets/main.css'

const app = createApp(App)

app.use(router)
app.use(store)
app.use(addDirectives)
app.use(addFilters)
app.component(Modal)

app.config.globalProperties.$axios = axios

app.mount('#app')