Vue2 vs. Vue3: Why migration should have been done yesterday

Reasons to migrate and Its Challenges

Designed as a minimalist alternative to Angular, Vue.js is one of today's most preferred JS frameworks. The latest version centers on performance and introduces features like Composition API and greater code modularity.

When the question 'Should we migrate to Vue3?' arises, the answer is yes. While migrating may require efforts and resources, the benefits of performance, maintainability, and future-proofing make it worthwhile.

As your product continues to evolve, the codebase must be upgraded from Vue2 to Vue3. If you are starting a new project today, Vue.js 3 is recommended.

As of 2023, Zoom, Apple, Nintendo, and GitLab used Vue.js in 2023. The last one can serve as a trusted illustration of why migrating from Vue2 to Vue3 is a non-skippable step and how to handle this process. Here, you can check GitLab’s ongoing codebase migration flow and track its current state.

The later you start the migration, the more complicated this process will be. It is more likely that the next feature for your app will take three times longer to implement because it will be available only on Vue3. Hence, it would require more time and effort and, as a result, would be highly cost-intensive.

And we come to the new question: what more challenges could a delayed migration to Vue3 bring?

Challenge #1: Breaking changes and complex process

Migrating to Vue 3 can be challenging, depending on your project's size and complexity. It involves updating large amounts of code and rechecking that everything works as expected. Migration of the existing project becomes even more tricky when it involves upgrading the under-the-hood technology that the whole system runs on. 

Adapting existing code and APIs may require a number of modifications that can affect the app’s behavior. Over time, the required changes and scope of work will increase in direct proportion to the Vue 3 development and old features’ obsolescence.

At Freshcode, we recently migrated an app (~150K lines of code) from Vue 2.6 to Vue 3.3 in about four weeks. In the last section of the article, we talk about our experience. 

Freshcode Tip

To avoid overcomplexity during the migration process start by carefully planning and prioritizing critical components. Maintain documentation, break down the complexity into manageable chunks, and involve relevant stakeholders to seek expertise.

Challenge #2: Performance and optimization

Vue.js 3 offers optimized app performance, but you may face several performance issues if not handled carefully during the migration process. Vue 2 to Vue 3 migration is not always straightforward, and businesses should be aware of potential issues and rely on an experienced engineering team.

Freshcode Tip

Thoroughly test and optimize app performance during and after the migration to ensure its continuous improvement.

Challenge #3: Time and resource allocation

As is known, one of the biggest challenges in software development is not creating new functionality but supporting existing ones. With increasing dependencies and complexity, you may face hurdles in keeping everything updated. That’s why app migration requires time, costs, and human resources. However, as a result, it will help you keep your application up-to-date and meet user expectations.

Freshcode Tip

Take the burden off your shoulders and streamline the process of migrating to Vue3. Entrust your project to a dedicated software development team with proven experience in Vue and successful case studies.

After considering the mentioned challenges, the third and final question arises: is the game worth the candles? Once again, the answer is yes.

While migrating large systems is usually a daunting task, it will be helpful to understand the reasons behind it. In the next section, we will discuss why migrating to Vue3 is a profitable and essential step for your business.

6 key benefits of migration

Timely migration to Vue3 brings several valuable benefits. Reliability and cost-effectiveness are at the top of the list, but the benefits are not limited to these factors. 

So, what does your product gain from Vue 3?

Vue 2 vs Vue 3: what are the differences

Let's explore key features from Vue.js 2 that have either been deprecated or updated in Vue.js 3. That’s not a complete list of Vue 3 breaking changes; all the details you can find in the official Vue documentation.

Deprecated Vue 2 features

Global API

The Vue global API has undergone sighnificant changes. Some parts of it can be considered deprecated in favor of the Composition API and other new patterns introduced in Vue 3.

Composition API is now the recommended way to achieve similar functionality while promoting better organization and reusability of code.

Filters

The main problem with Filters was performance: the filter function had to be executed every-time data was updated. Also, it brought a steeper learning curve for Vue.

That’s why it was dropped with the new version. In Vue.js 3, you can achieve the same thing by using a computed property.

Plugins global instantiation

With Vue 3, plugins are no longer instantiated globally. It means you can create multiple Vue apps within the same project and make each configuration as an individual custom object, having isolated instances that do not share any features by default.

Instead of relying on the global Vue instance, plugins now integrate directly with the specific app instance where they are needed. This change aligns with Vue 3's modular and more tree-shakable architecture.

Functional components

In Vue 2, functional components were used in the case of performance optimization as they initialized faster than stateful components. However, in Vue 3, performance gains for functional components are negligible. As the Vue team recommends, you can use stateful components everywhere without any performance hit.

Keycode modifier

In some apps, developers use keyboard keys to trigger custom events. In Vue 2 you could not explicitly state these keys but had to use their associated keycodes.

Vue.js 3 said goodbye to this hassle. No more suffering with keycodes; you just call the values instead, making your development process more seamless.

Updated Vue 2 features

V-models

While it's not a new feature, it has been improved to provide better compatibility with Composition API and to offer more flexibility. Previously the Vue component was only restricted to a single v-model supported by emitting input and accepting a value prop.

With Vue 3, now you can create multiple v-model bindings for custom values. These updates offer more control and flexibility, making it easier to work with Vue components.

Fragments

Another important change in Vue 3 over Vue 2 relates to fragments. You can now declare multiple root elements in a single template. It results in cleaner code and fixes occasional style issues caused by unnecessary wrappers.

$attrs

In both Vue versions, $attrs is a powerful feature, however, in Vue 3, it becomes even more comprehensive. It includes all the attributes that are not declared by the component's props or emits options, including class, style, and v-on listeners. It makes it much more easier to apply them to a different element and provides more flexibility, making it easier to compose components in complex apps.

How Freshcode migrates from Vue 2 to Vue 3

In this chapter, we prepare a brief overview of our case study on how we migrated an app (~150K lines of code) from Vue 2.6 to Vue 3.3 in about four weeks.

We prepared this migration following the official Vue Migration Tutorial, but also discovered different drawbacks and caveats while migrating our project. Here, we share steps were involved so other businesses can benefit from our experience.

Project description

The Vue.js framework’s first large pre-beta release happened in late 2016, and the platform we are about to introduce began development on top of Vue in 2015. This turned out to be a good decision — Vue remains the underlying technology of this product to this day.

It is a TeleHealth platform that provides autism therapy services. The application is used every day by thousands of active users all around the world.

As the app evolved together with the Vue community over the years, it expanded to become a fully-fledged product. This is where our migration story begins.

Strategy for the migration

A well-defined strategy is a guiding framework that ensures alignment, efficiency, and effectiveness in the development process. When preparing for migration planning, it's essential to consider these six factors:

Migration plan

It's also important to have a clear plan to guide the migration process efficiently and ensure a smooth transition.

At Freshcode, we have achieved a complete migration following these eight steps:

1

Install Vue's Migration Build

As mentioned before, the Vue Team built a package called @vue/compat, also known as Migration Build, which enables your application to support both Vue 2 and Vue 3. This package is not intended for production, it’s only supposed to be used while converting the app.

2

Fix Migration Build's errors

This step refers to the process of addressing and resolving any issues that arise while using the @vue/compat during the migration. This package is designed to provide a bridge between Vue 2 and Vue 3 APIs, allowing your code to work with a new version without significant modifications. However, due to differences between Vue 2 and Vue 3, there may be cases where certain parts of your code cause errors or behave differently after migration.

3

Fix Migration Build's warnings

Here we comes to Migration Build's warnings. Warnings are not errors that can break the app but serve as notifications about code constructs that might cause problems in the future or need to be updated for better compatibility with Vue 3.

4

Fix package compatibilities

This step involves the processes of updating packages to their latest versions (including Vue Router and Vuex) and resolving issues that arise when using third-party packages or libraries that may not be fully compatible. During the Vue 3 migration, some packages that worked seamlessly with Vue 2 encountered compatibility problems with the new version.

Freshcode Tip

Note that Vuex can be updated in two ways, considering time frames and project goals. The first way is to upgrade from Vuex3 to Vuex4 (a super fast option). However, it is worth understanding that Vuex is now considered a deprecated library and has been replaced with Pinia.

So, the second option is to upgrade to the official state-management library, Pinia. This is a more time-consuming way, as more changes will need to be implemented in the codebase, but it is generally a more solid and future-proof approach. 

Many Vue projects already involve Vuex so it is you should be aware of the drawbacks you might face.

5

Fully switch to Vue 3

Having a successful migration meant not breaking anything. So, to ensure that everything was ready to finish the transition, we made the application go through a full regression test to ensure every feature worked as expected. Finally, we fully switched to Vue 3 by uninstalling the Migration Build.

Extrastep: Update your unit tests
Vue 3 migration brings changes to the testing library, which can affect the behavior of your components and how they interact with the Vue ecosystem. Therefore, you may need to update your unit tests to ensure that your app continues to work correctly with the new version.

Extrastep: Fix TypeScript support

This option can involve different steps regarding the project tech stack: 

If TS is already used in the project:
1. Fix TypeScript support

If TS is not used in the project:
1. Integrate TS into the project
2. Just skip this stage and continue migration without using TS

Results

Migrating to Vue 3 is an investment in the stability of the project and fast, efficient development. It brings many enhancements for the further support and maintenance.

Yehor Tishchenko

JS Team Lead at Freshcode

The main drawbacks were:

To sum up

Migrating from Vue 2 to Vue 3 may sound challenging, but it is an achievable task with proper planning. We hope that our experience will help you upgrade Vue2 to Vue 3 and  start the process smoothly.

If you are looking for a software development team to guide you through the migration, please contact us. We will provide recommendations for your project and ensure together that Freshcode can meet your business needs.

With updated features and improved performance, Vue 3 will make your product faster and more enjoyable for users. 

Don't be afraid to take the leap. Safely upgrade your product to Vue 3 and start 2024 with a competitive edge.