Software Development Updates

Vue 2 reached its end of life on December 31st, 2023. So, it’s important to migrate your app from Vue 2 to Vue 3. This undertaking of moving your app to the latest framework version can be challenging, but you can get through it easily with the help of a well-known VueJS development company. In June 2021, the official Vue team also released a “Migration Build” to simplify the process for developers. If you are waiting for a step-by-step tutorial, then here it is. Our article guides you through each stage of the Vue 2 to Vue3 migration process, making it accessible even for beginners. 

So, let’s get started.

1. About Vue 3

Vue 3 is the latest version of the Vue framework, which is helpful to developers for building user interfaces and modern web apps. Vue 3 is better than its predecessors in terms of scalability and performance. It comes with a multitude of new features and many improvements over Vue 2. 

Vue 3 offers a redesigned Virtual DOM, better TypeScript support and a new reactivity system. It also provides Composition API, a new method to make your code reusable, easily maintainable and more organized. 

Vue 3’s TypeScript integration enables the developers to use static type checking in their projects. It is a progressive framework that is easy to use and simple to learn. Vue is scalable, thanks to its component-based architecture. Such modularity makes Vue an ideal option for developing complex apps.

Here is what a Twitter user says about Vue3.

2. Key Benefits of Migration to Vue 3

Vue 3 offers significant improvements over Vue 2. There are many reasons for migrating your applications from Vue 2 to Vue 3. Here are a few: 

2.1 Better Performance

Vue 3 is faster compared to its predecessors. It introduced a new reactivity system and optimized the existing rendering mechanism, which helps enhance responsiveness and app performance. 

Vue 3 has reduced memory usage by 54%, accelerated the initial rendering speed up to 55%, and made updates 133% faster. As a result, abandonment rates are lower in Vue 3 since it offers improved user perception and a better user experience. 

2.2 Better Type Support

Using TypeScript in the Vue app provides better support for the Composition API. Since there is poor TypeScript inference due to the dynamic nature of Option’s API, Composition API’s exceptional TypeScript support can prove to be useful. As a result, you would have reduced bugs, increased developer productivity, and improved auto-completion and type-checking. 

The entire codebase in Vue 3 is based on TypeScript, which allows for easy type checking, type inference, and auto-generated type definitions in the templates. 

2.3 You can Now Use Composition API

Vue 3 now allows you to use the Composition API, which, once mastered, can significantly enhance the developer experience. But if you prefer using Options API, you are free to continue Vue development with it.

2.4 Enhanced Scalability

As applications become more complex over time, managing state and logic can be challenging. However, using the Composition API can help you organize your large-scale Vue code easily. It allows you to encapsulate the related state and logic into composable functions, making it easier to manage a complex Vue application effectively. 

3. How to Migrate From Vue 2 to Vue 3?

To understand the migration process from Vue 2 to Vue 3, we will first create an inventory management application using Vue 2. If you don’t have Vue CLI installed on your system, then install it and then create a new Vue 2 project using the following commands: 

npm install -g @vue/cli@4
vue create vue2-to-vue3

Now open the src/components folder and use the below code to create a file called InventoryItem.vue file. 

Now, create another file named InventoryApp.vue file in the same folder using the following code: 

The App.vue should be as follows:

Run the given project using the command npm run serve to obtain the output as shown below:

Once we have a working Vue 2 project, it’s time to switch it to Vue 3. Before making any changes to the code, we need to install and upgrade a few packages and uninstall unnecessary ones. 

Upgrade vue-loader to version ^16.0.0 when using a custom webpack setup. Use the vue upgrade command to update your vue-cli to its latest version. This command will provide you with a list of the vue packages that need updating. Press Y to accept and upgrade the required packages. 

Now, run the commands given below to install Vue 3 and vue/compat.

npm install vue@3.1.0 @vue/compat@3.1.0

If you have a Vue template compiler installed on your system, uninstall it using the command npm uninstall vue-template-compiler. 

Run the command npm install @vue/compiler-sfc@3.1.0 –save-dev

Next, go to the root folder and create a vue.config.js file with the following content: 

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
       	MODE: 3
            }
          }
        }
      })
  }
}

When running the project on a development server, if you come across eslint errors then run the following commands: 

npm install eslint@^8.0.0 eslint-plugin-vue@^8.0.0 --save-dev
npm uninstall babel-eslint
npm install @babel/eslint-parser --save-dev
Add a new file in your project’s root folder consisting of the following code: 
"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser"
  },
  "rules": {}
}

Make changes to the main.js as shown in the code below: 

import { createApp, createCompat } from "vue";
import App from "./App.vue";
 
configureCompat({
  MODE: 3
})
 
createApp(App).mount("#app");

It’s time to fix the errors you see in the terminal. After implementing changes, your code in the InventoryApp.vue file would look like this: 

Let’s review the changes made in the code above: 

1. Removing Filters: Since Vue 3 doesn’t support filters anymore, we used a computed property called capitalizedMessage in its place. 
2. Replacing Sync Modifier: We replaced the sync modifier with :stock=”stock”, which is the Vue 3 equivalent.
3. $children Removed: Utilized the itemRef to replace $children with the ref API. 
4. Removed the Inline Templates: The inline template feature is no longer available in Vue 3. So, here we use the <p> tag. 
5. Adding the Setup() Function: We have refactored the Vue component using the setup() function to use Composition API instead of Options API. 

After making the changes mentioned above, your project can run error-free. Once you resolved all the errors in your Vue project, you can proceed to remove the @vue/compat and its relevant configurations using the following commands:

First, we will uninstall the @vue/compat with npm uninstall @vue/compat.

And then update the main.js as shown below:

import { createApp } from "vue";
import App from "./App.vue";
 
createApp(App).mount("#app");
 
The vue.config.js file is updated as shown in the below code: 
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        return {
          ...options,
        };
      });
  },
};

Now, if you can run this project successfully without any errors. This means that your Vue 2 to Vue 3 migration is successful. 

4. Conclusion

Vue 2 to Vue 3 migration isn’t just about keeping up with the latest version of the framework. It’s about maximizing the web development capabilities of the Vue framework, allowing you to initialize a more robust and efficient development process. 

By offering a whole new set of advanced features like TypeScript support, and the Composition API, Vue 3 is certainly an upgrade over Vue 2. However, the task of migrating an app to the latest version can be daunting, especially if you are working with a complex enterprise application. 

However, following the migration guide detailed in this article can make the process more manageable and rewarding. Contact our experts in case you have any further queries.