7 Insights for Vue 3 Migration Success: Q&A with Monterail's Experts

Artur Rosa: At Monterail, we have many success stories with Vue. We’ve used Vue 2 in our projects and Vue 1 before. I must admit we kind of love Vue. We’re pretty much a Vue.js agency at heart. When Vue.js developers at Monterail found out that Vue 3 was about to be released, we were eager to start using it.

However, even though the stable version of Vue 3 was released in September 2020, the Vue,js ecosystem needed quite some time to catch up. So, for a long time, migrating our projects seemed like a really tough task. In many of those projects, we had critical dependencies that did not support Vue 3.

Now, we’re in a totally different situation. The Vue ecosystem is already pretty strong, and Vue 3 has become the default version of Vue. It’s also the case at Monterail - when we start a new project, Vue 3 is the way to go for us. In 2023, the time has come to think about and reconsider migrating some existing projects that we have. 

Another reason to start thinking about it is that Vue 2 is already closed to new features. It is now in maintenance mode, which means that the Vue team will still fix newly found bugs but will not add any new features. Vue 2 applications will still work as before, only until the end of 2023.

One major driver for Vue 3 migration is that Vue 2 has entered maintenance mode and will reach its End of Life (EOL) at the end of 2023. After that, Vue 2 will no longer receive updates, including security fixes. This makes Vue 2 to 3 migration essential for the longevity of applications. I know this may sound scary, but it is good to know and understand what it means in practice. Basically, this is the final reason why you should at least consider migration. 

Vue.js development services have evolved significantly with Vue 3, and while Vue 2 served many projects well, it’s now in maintenance mode. The Vue.js ecosystem has also matured, and Vue 3 migration benefits include performance improvements, better TypeScript support, and access to powerful new features such as the Composition API and Suspense.

Artur Rosa: The question is: what will happen with Vue 2 projects once its maintenance phase is over? Truth be told, it's probably nothing special for quite some time. Newly found bugs will still be fixed for Vue 2, but it’s already a very stable and well-tested framework, so it should not be a big problem. There might be some issues with support in new versions of browsers sometime from now, but we are not expecting it to happen in the foreseeable future. Such things do not appear to happen often, and we do not expect them to happen more often.The same risk applies to the community-driven Vue 2 libraries and other third-party dependencies. With Vue’s End of Life, it is very likely that most libraries won't see an update, so the risk should be assessed per project, depending on how many critical parts of your product depend on external libraries. 

Also, particular attention should be given to integrations with external services because such integrations may simply stop working, and the vendor can only make changes for Vue 3. In the standard scenario, the author would probably release a new library version, but here it may not be so. 

Another aspect that should not be underestimated is the developer community. As time goes by, it will be increasingly difficult to find people willing to work with End-of-Life technologies like Vue 2, so you should plan for this in advance.

Szymon Licau: As I’ve mentioned, migration is risky. Essentially, if you think about it, it’s a change that affects your whole application. While staying with Vue 2 might be feasible for a while, Vue 3 migration challenges include potential bugs and breaking changes. Of course, this is bad because you don’t want to impact your users negatively.

Because it's such a big thing, it’s difficult to accurately estimate how much time and effort the migration will take - so many uncertainties are involved. Even taking it one step at a time will uncover new things and increase the workload.

Artur Rosa: The upgrade will not only eliminate future problems but can also be rewarding. So, what can we gain? 

The Vue 3 migration benefits go beyond just avoiding future issues. One of the key advantages is performance. Vue 3 offers noticeable performance improvements thanks to its new rendering engine. This will often lead to a faster and more responsive application, which is crucial for user experience and SEO.

Let me start with the performance aspect of Vue 3 migration. I’m not a huge fan of stating how much the application's speed has increased because it depends on multiple factors. The truth is that in almost all cases, Vue 3 is faster than the previous version. It can be quite a noticeable change for some applications. 

Performance has a significant impact on UX and how users perceive an application, and it can also affect search engine optimization. If that’s important for your project, you should be aware of it. 

Vue 3 introduces several new features, such as:

• Composition API 

• Teleport 

• Suspense,

• multiple root elements for a template.

Vue js developers working on large, complex projects will particularly appreciate these advancements. Those functionalities open up entirely new possibilities for creating a maintainable and scalable architecture. Again, it’s particularly important for complex applications. The Vue team has poured some of these features into Vue 2, but only some of them and with additional limitations. To take full advantage of them, migration is necessary. As I mentioned in the performance question, those new features can support it because they provide new ways of sharing logic. They are not only great tools for developers, but they can impact how the applications work.  

When creating Vue 3, the core team was very much focused on developer experience. My impression is that this focus has become a priority across the ecosystem—just take a look at Vite, Vitest, and libraries such as Pinia or VueUse, which work with virtually no configuration and are super fast, lightweight, and intuitive.

Thanks to Vue 2.7, it’s still possible to use some of the libraries developed mostly for Vue 3 applications, but unfortunately, only a tiny part of them. 

Another thing is Typescript support - thanks to this; code editors can help as developers do their work. We also have more options to ensure the stability of the software - Vue 3 allows you to analyze the entire application's code statistically.

Last, I want to mention some upcoming features in Vue 3. As a sneak peek, let me mention some releases for this year: lazy hydration and SSR-only template elements. The plan for the second half of this year is to ship Vapor mode, an alternative compilation strategy for Vue components based on the Solid framework. This could be a game changer for applications that require extreme performance. Unfortunately, there’s no hope for those new features to be imported back to version 2.

Szymon Licau: So, you know the benefits and the migration process may look enticing. It’s not as simple as one might think. Sometimes, it may not be a good choice or even a possibility. Before we start driving into things a bit deeper, let me bring back a quote from Evan You from last year’s Vue Report produced by the team at Monterail.

Szymon Licau: If your application has high test coverage, that's excellent. This will make you much more confident when you migrate it to ensure that it works and that you are not introducing new bugs or errors. Migration is actually quite a scary and risky process. 

If you have few external dependencies, then the migration may be a pretty straightforward process. The Vue Migration Guidelines are just what you need to complete it, and it won’t take that much time or effort.

Szymon Licau: The answer to this question is: that it depends on many factors you have to look at carefully. The short answer to this question is: it depends. If your Vue.js company has high test coverage, it will speed things up, as automated tests can quickly identify and fix issues. Following Vue 3 migration guidelines and using incremental migration strategies can also reduce downtime and ensure a smoother process.

Still, even if you do not decide to migrate or you do not want to migrate at this time, there are some good steps you can take to improve your codebase:

Moving away from Vue CLI and Webpack to Vite is a new recommended approach to building applications. This improves the speed of building your application, the development experience, and the configuration.

Upgrading to Vue 2.7: If you haven't already upgraded your Vue version, I highly recommend that you do so. Many features are backported from Vue 3, including Composition API, script setup, new libraries (VueUse), better Typescript support, and better tooling support (Volar).

Szymon Licau: Before we begin the migration process, we—of course—have to audit the project to get a bigger picture. You have to think not only about what to complete before migrating to Vue 3 but also about your resources, technical aspects, and project status.

Now, in terms of the actual migration process, at Monterail, we always try to minimize the amount of risk that we could cause for your end users. This is why we introduce a concept called incremental migration. As the name suggests, the process is not a single step for the migration, with your team taking a giant leap. Instead, you should define smaller milestones, deploy your application more often, and successfully do it with smaller steps. Therefore, we will also minimize the risks because we will control what areas we will affect in your application.

If you do it step-by-step, you will be able to predict better the amount of effort we need, the unknowns we see, and how much time such a given step could take.

Now, if automated tests are also implemented in your project, this is an excellent moment to introduce them and increase your confidence in the code you ship to production. The result of that means that you can continuously improve your codebase and start reaping the benefits early. 

It's also important to remember that migration does not necessarily mean you will be blocked from the development process. It can happen in parallel to the migration process.

If you'd like to learn how the Vue 2 to Vue 3 migration process looks in practice, go straight to the blog post where we analyzed an example of successful migration to Vue 3. Find out what were the lessons learned for our team.

Here are a few solutions that could make it possible.

The first one is probably the most obvious: using a migration build. This build type allows you to have Vue 3 and Vue 2 code in one single codebase. It means you can change parts of the application you want one by one, gradually migrating them over to Vue 3. Once you’re done, you can change the migration build to a Vue 3 build. A migration build that supports Vue 2 and Vue 3 codebases can make this transition smoother. However, this approach may introduce Vue 3 upgrade risks, such as performance overhead.

Now, it’s not all roses—there are some downsides to this migration approach, i.e., the migration build will add unnecessary performance overhead to your application or increase your bundle size. If there are areas in your application that are very performance-critical, this might not be the way for you because it will definitely impact those areas. 

Another solution is perhaps radical, but it’s particularly significant if you plan to introduce new features to your application. The idea is this: you can start writing them in Vue 3 even before you migrate. Again, there are quite a few not-so-simple issues you have to solve here, like code sharing between the two applications, but you can start writing new modern Vue 3 code and essentially slowly move the old modules to the new application. Once you’re done, you can sunset your Vue 2 application. This approach can also be constructive if you have some refactoring in mind with your codebase. 

Another solution, but perhaps the most complex one, is to introduce micro frontend architecture to your application. This approach means that instead of having one large application, you split it into chunks and have several submodules—each working as a small application.

This approach—while introducing complexity—has some benefits. Each of these smaller applications might use different technology, so they need to use different frameworks or different versions of a framework. Therefore, you essentially cut your workload into smaller pieces, which you can address in parallel or one by one. Then, you can migrate them one at a time when you need to.

Szymon Licau: There are some dependency issues between the two versions. Here are some steps you could take to address some of them. 

If you have a dependency that perhaps does not support Vue 3 but was working fine with Vue 2, you can, of course, try to find an alternative. Of course, tweaking your code to address differences between these two dependencies is not always possible, but it’s always an option.

If you're not already doing so, you can also try to decouple your dependencies and wrap them around in a wrapper. This way, you have your own abstraction that uses these dependencies, which are external inside of it. You treat it like a black box. You can tweak and change its internal while keeping the dependency working. This works especially well for UI components. 

You have the option to wait for the support for Vue 3 if you know that the team behind the dependency is working on it. Check if waiting aligns with your product timeline, but this decision could force you to put off the migration process if the dependency is essential or considerable. 

If you don't feel confident and you know that dependency is the only option, you can always contribute to the Vue community and work to solve this issue.

Lastly, if everything else fails, you can always try to replace the dependency with a custom solution, but this will obviously increase your workload, so I’d see it as a last resort.

Szymon Licau: Typically, the issues that come up are not usually connected to the Vue framework itself - they’re usually about the dependencies. For example, migrating your Nuxt application might be quite complex and challenging, especially because many of the popular modules for Nuxt 2 are still not there for Nuxt 3. 

The Nuxt team has proposed some solutions here, and there are other ways to approach it, like Nuxt Bridge. If your product doesn’t have many dependencies and if you follow the Vue Migration Guidelines, the whole process should be pretty straightforward.

It’s worth mentioning that deciding not to migrate can also be a valid choice. Your approach should depend on your project status, resources, and other factors. You can also migrate later and prepare for it now. Migrating from Vue 2 to Vue 3 is not just a technical upgrade; it’s a strategic decision that can future-proof your application. While there are risks, the long-term Vue 3 migration benefits—from better performance to modern features—make it worthwhile. 

If you plan to migrate, remember that it’s a lengthy process. And even a very thorough process won’t address everything, but it’s a good starting point. Whether you use a Vue.js agency services or work with in-house Vue js developers, planning and executing your migration carefully is the key to success.

Even with a great plan, migrate your application incrementally to minimize the risks and move your features to production faster. Get in control of the challenges and limit their likelihood because the worst thing that can happen is errors affecting your users. 

Of course, you can migrate the application even if you’re still actively working on it. Migration doesn't necessarily mean that you have to block development. It can still happen in parallel if you have proper solutions. By following the right Vue 3 migration guide and planning for challenges, you can ensure a smoother transition, minimize downtime, and reap the full rewards of Vue 3's powerful features.