The New Default. Your hub for building smart, fast, and sustainable AI software
Vue.js Migration Guide
Are you struggling with migrating your project to Vue 3.0? Together with the Vue Core Team and our Vue experts, we’ve compiled a step-by-step Migration Guide to help you modernize without the overwhelm.
Delivered by the official Vue.js Partner
Monterail is proud to be on the Official Partner Lists of Vue and Nuxt, which feature top-tier software development and consulting agencies. Partnering with us means working with a trusted Vue.js and Nuxt development company that offers top-quality assurance and innovation. With years of hands-on experience, we pride ourselves on being expert developers who consistently deliver outstanding results.
PARTNERS TESTIMONIALS
Sébastien Chopin
Creator of Nuxt
I strongly recommend Monterail as a reliable Nuxt partner for many years now. I value their technical expertise and unique approach to software development.
Evan You
Creator of Vue
Since 2015, Monterail has consistently demonstrated expertise in building exceptional digital solutions and has proven to be a reliable and skilled tech partner for custom development.
Migration to Vue 3: Still a pain point
Vue 2 officially reached End of Life (EOL) on December 31st, 2023 meaning it no longer receives new features, updates, or fixes. Yet, insights from the State of Vue.js Report 2025 reveal that many teams have not fully migrated and are still struggling to make the switch.
35%
have still used Vue 2.7x version in their projects in the last 12 months.
25%
reported experiencing challenges when migrating from Vue 2 to Vue 3.
Stuck with Vue 2?
There are many reasons why it's hard to migrate some applications to Vue 3:
Huge codebase
Lack of time/budget
Lack of experience
Dependencies without Vue 3 support or a lot of breaking changes
Usage of non-public APIs that has been changed in newer versions
Our guide will help you overcome these challenges and find a tailored solution.
Why upgrade? Key features of Vue 3
Vue 3 has new features that are not present in Vue 2, such as Teleport, Suspense, and multiple root elements per template. These functionalities open up new possibilities for developers and can help take care of an easier to maintain and develop architecture especially for complex applications.
Expert's insight
Vue 3 has matured
One of the greatest benefits of upgrading now, compared to three years ago, is how the Vue 3 ecosystem has matured immensely. We have tons of UI component solutions, including the newly released Nuxt UI3. We’re filling the gap for the Vue 3 ecosystem. [...] However, I would suggest evaluating the situation on a case-by-case basis, always weigh the costs against the benefits of migrating to Vue 3.
Monterail’s Incremental Approach to Migration
Vue 3 migration is more than just a technical update—it’s a strategic upgrade that needs a strategic approach.
At Monterail, we’ve found that an incremental approach works best. Rather than rewriting your entire codebase at once, we update small, self-contained parts of the application step by step. This minimizes disruption, reduces risk, and keeps your team productive.
Your legacy codebase will still be modernized—but in phases aligned with your product vision. This spreads out the effort, lowers immediate costs, and helps manage technical debt more effectively.
Expert's opinion
Minimizing risk for your end users
At Monterail, we prioritize minimizing risk for your end users. That’s why we recommend an incremental migration approach. Instead of a single, large-scale migration, we break the process into smaller, manageable milestones. This allows for more frequent deployments, better control over which parts of the application are affected, and reduced risk at every step. By migrating gradually, you gain better visibility into required effort, potential unknowns, and time estimates for each phase—making the entire process more predictable and less disruptive.
Before installing Vue 3
Consider these steps even if you don’t plan to migrate.
1. Update Vue to version 2.7
New options to write and organize your code:
stable Composition API
<script setup>
CSS v-bind
New libraries, e.g. VueUse
Better tooling support: Volar
2. Start using Vite and Vitest
It's a whole new level of developer experience.
How to approach incremental migration? Potential solutions
Use migration build
@vue/compat can postpone the migration of parts of the application. Despite the small performance and size overhead, you can ship partially upgraded applications to production.
Use vue demi to share code between Vue 2 and Vue 3 apps
Vue Demi is a developer tool that allows you to write code using the universal Vue API, which can run in both Vue 2 and Vue 3 applications.
Consider implementing a microfrontend architecture
Such a solution may add complexity to the application. However, its advantage is the freedom in the approach to migration each module can now be upgraded separately.
Create new pages/modules within the new Vue 3 application and gradually move the old ones
Just introducing a new module in your application? Create it as a new application with Vue 3. You will encounter difficulties here (particularly related to code sharing), but addressing issues now can pay off sooner than you think. You may find it beneficial to slowly move previous parts of application here as you go.
Overcome Vue 3 migration challenges with proven solutions.
Below you will find three most common types of blockers when migrating to Vue 3, listed with ready-to-implement solutions.
Vue 3 Migration Guide
Choose Solutions: 1, 2, 5, 6
Solution 1. Replace libraries with the alternative one that supports both Vue 2 and Vue 3.
Some libraries that support Vue 3 also have Vue 2.7 support. Thanks to the Composition API, some libraries that provided renderless components or Vue plugins requiring installation can now be replaced with composables. VueUse, for example, provides a wide range of such utilities.
Tip: Streamlined migration you can wrap a composable yourself in a renderless component providing a similar API as the library you used before (see below).
Solution 2. Create an adapter (wrapper) around dependency.
Wrapping a library within an adapter can decouple your application and the library. If the API provided by the adapter is as small as possible and independent of the library implementation, it’s easier to update/change the library later. Plus, you can minimize the risks of upgrading, due to a better understanding of a dependency.
Solution 5. Replace the library with custom solution.
External dependencies can accomplish simple-to-implement functionalities. Review the libraries that block your Vue 3 migration. You might utilize only a fraction of it or you can replace it with your own code.
Solution 6. Wait for support for Vue 3 or contribute.
The application may be dependent on the libraries used and you can’t change it. The simplest solution: wait for stable support for Vue 3. It is worth considering whether you can support the maintainers in any way.
Choose Solutions: 1, 2, 5, 6
Solution 1. Replace libraries with the alternative one that supports both Vue 2 and Vue 3.
Some libraries that support Vue 3 also have Vue 2.7 support. Thanks to the Composition API, some libraries that provided renderless components or Vue plugins requiring installation can now be replaced with composables. VueUse, for example, provides a wide range of such utilities.
Tip: Streamlined migration you can wrap a composable yourself in a renderless component providing a similar API as the library you used before (see below).
Solution 2. Create an adapter (wrapper) around dependency.
Wrapping a library within an adapter can decouple your application and the library. If the API provided by the adapter is as small as possible and independent of the library implementation, it’s easier to update/change the library later. Plus, you can minimize the risks of upgrading, due to a better understanding of a dependency.
Solution 5. Replace the library with custom solution.
External dependencies can accomplish simple-to-implement functionalities. Review the libraries that block your Vue 3 migration. You might utilize only a fraction of it or you can replace it with your own code.
Solution 6. Wait for support for Vue 3 or contribute.
The application may be dependent on the libraries used and you can’t change it. The simplest solution: wait for stable support for Vue 3. It is worth considering whether you can support the maintainers in any way.
Choose Solutions: 2, 5
Solution 2. Create an adapter (wrapper) around dependency.
Wrapping a library within an adapter can decouple your application and the library. If the API provided by the adapter is as small as possible and independent of the library implementation, it’s easier to update/change the library later. Plus, you can minimize the risks of upgrading, due to a better understanding of a dependency.
Solution 5. Replace the library with custom solution.
External dependencies can accomplish simple-to-implement functionalities. Review the libraries that block your Vue 3 migration. You might utilize only a fraction of it or you can replace it with your own code.
Choose Solutions: 2, 3, 4, 5
Solution 2. Create an adapter (wrapper) around dependency.
Wrapping a library within an adapter can decouple your application and the library. If the API provided by the adapter is as small as possible and independent of the library implementation, it’s easier to update/change the library later. Plus, you can minimize the risks of upgrading, due to a better understanding of a dependency.
Solution 3. Write automated tests for risky parts of your code.
Using a non-public library API or utilizing its undocumented behavior, document it in the form of automated tests. This secures a peaceful night’s sleep after even minor updates, simplifies locating bugs in major updates.
Solution 4. Perhaps the solution that was used was not the best possible solution.
Using a non-public library API or utilizing its undocumented behavior, document it in the form of automated tests. This secures a peaceful night’s sleep after even minor updates, simplifies locating bugs in major updates.
Solution 5. Replace the library with custom solution.
External dependencies can accomplish simple-to-implement functionalities. Review the libraries that block your Vue 3 migration. You might utilize only a fraction of it or you can replace it with your own code.
Take Vue.js Further with Monterail
At Monterail, we deliver our Vue.js expertise to help businesses build scalable, high-performance applications that drive results. By partnering with us, you gain access to a team of professionals with 10+ years of Vue experience and over 40 successful Vue projects.
:quality(95))
40+ Vue.js projects
EXPLORE ALL SUCCESS STORIESEXPLORE ALL SUCCESS STORIES
:quality(95))
Vue development services
LEVERAGE VUE WITH MONTERAILLEVERAGE VUE WITH MONTERAIL
Every great product starts with a conversation. Share your vision with us, we’ll help you shape it. Let's meet to plan the next steps and make it happen.
Grzegorz Hajdukiewicz | Chief Delivery Officer
Get in touchGet in touch