Are you working on VueJs 2?
Is there a requirement to migrate from Vue 2 to Vue 3?
Are you frustrated and stuck with the entire migration process?
Do you want to end your struggle?
We are here to help you! Many of our technical readers have suggested writing a descriptive tutorial for beginners on migration from VueJS 2 to VueJS 3. So, here we are, back with the step-by-step guideline. Don’t worry if you are not familiar with the migration process. We will be learning it from scratch.
So, let’s understand why migration from Vue 2 to Vue 3 is essential.
The IT industry evolves with time so does the technology, and so do its technical requirements. To keep the project updated is inevitable even if one of the technology from the tech stack has been updated. The reason behind this is whenever the technology evolves, it updates its dependencies and libraries, it removes unwanted garbage code, it also adds new features that enhance the development and workflow.
Vue 3 is comparatively new updated technology. There’s no need to immediately update your entire Vue 2 project to Vue 3, but you should start planning it out. Because as time will pass, lesser third-party libraries will be supporting version 2 and maybe VueJS will not lesser the development support for version 2.
VueJs 3 is written from scratch and comes with even better performance, better tree-shaking, smaller size, improved TypeScript support, and many new features for developing large-scale enterprise software.
You don’t need to worry about it. Here in this tutorial, we will learn how to migrate from Vue 2 to Vue 3.
The migration process can be quite complicated and hectic. So, to ease out the process we have used a basic demo application that fetches the users’ data from JSON Placeholder API and will build a simple UI to display it.
So, here’s what we will be covering in our tutorial.
Vue 3 was officially launched on 18th September 2020 and is considered to be the default version from 7th February 2022.
Following are the breaking changes that you should look into for migration.
Let’s get started with the migration process.
Here we used Vue-2 to create our app.
Navigate to your project and run the application using these commands.
Your browser will show the default UI as shown below.
Vue2 package.json file.
Each Vue Component lives inside the .vue file. A Vue component consists of three parts.
1. < template > – Contains component’s HTML
2. < script > – All the JavaScript logic is written inside this tags
3. < style >> – Component’s CSS is written inside this tags
Are you looking for proficient VueJs developers for your project?
Bacancy is here for you! Contact us now and hire Vue developer to build, optimise, and deploy your application.
Here we create two components:
App.vue is the parent of all components. It defines the template of our page.
In Home.vue component we have done the following things:
Here we will receive ‘getAllUsers’ and ‘isLoading’ props. Once the data is fetched we will use a table to display users’ data. v-for will loop over the getAllUsers array on ‘tbody’ element and display user data. We will also implement one of the features offered by Vue2, i.e., ‘filters.’ Here we will use the ‘SetEmail’ filter. It will return the user’s email with 1st letter small.
Loading...
Name Username Company Name {{user.name}} {{user.username}} {{user.email | setEmail}} {{user.company.name}}
import axios from 'axios' import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { users: [], isLoading: false }, mutations: { GET_USERS(state, users) { state.users = users } }, actions: { async fetchUsers({commit, state}){ state.isLoading = true; const res = await axios.get('https://jsonplaceholder.typicode.com/users') commit("GET_USERS", res.data) state.isLoading = false } }, getters: { getAllUsers(state){ return state.users } }, modules: { } }
Output
Now, we are done building a basic demo application with VueJS 2. Before, moving on to the files here is the basic process that’s need to be followed to migrate from Vue2 to Vue3:
Install [email protected] and [email protected] and update them to the latest version as shown below.
Create a vue.config.js file to set up the compiler option to get migration build work.
Once done with the basic configuration, start the development server. You will be notifies with some error messages. So, let’s get started to solve them
First, we will fix the main.js file for vue3. Below is the comparison.
// main.js
Now, open router file and use the below code for migration.
Now update store file.
The remaing code in the store file would be as it is.
We also need to update the package.json file. Use the below image where we have updated the dependencies.
Vue 3 came with a new feature called ‘compositionApi’, which is a replacement for ‘optionsApi’ However, you can also use optionsApi.
Here we use compositionApi.
In Vue 3, ‘filters’ has been removed. Instead of filters, we can use the ‘computed()’ property.
Loading...
Name Username Company Name {{user.name}} {{user.username}} {{user.email.toString().charAt(0).toLowerCase() + user.email.toString().slice(1)}} {{user.company.name}}
So, these were the steps to implement the migration process from vue 2 to vue 3. You can visit the source code: vue2-to-vue3-example. Clone the repository and experiment with the code.
I hope the tutorial will get you started with how to migrate from Vue 2 to Vue 3. When it comes to migrating an enterprise-level or large-scale project it will definitely demand a lot of time, management, and effort. But, you can always split the module and plan accordingly. If you are a VueJS enthusiast and want to learn more about VueJS, then the VueJS tutorials page is for you.
Your Success Is Guaranteed !
We accelerate the release of digital product and guaranteed their success
We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.