Changing the starting files

With the new version of the packages, we will need to change our starting files. In a Vue project that was created with the Vue-CLI starter kit, you will find a file named main.js or main.ts. If you are using TypeScript, this file is located in the src folder. Now follow these instructions:

1. Open the main.js file in the src folder of your project. At the top of the file, where the packages are imported, you will see the following code:

import Vue from 'vue';

We need to change this to the new Vue exposed API method. To do this, we need to import createApp from the Vue package as follows:

import { createApp } from 'vue';

2. Remove the global Vue static attribute definition of Vue.config.productionTip from your code.
3. The mounting function of your application needs to be changed. The old API will look like this:

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

The old API should be changed to the new createApp...