Migrating from Vue 2 to Vue 3 Without a Rewrite
Vue 2 is end-of-life, and the migration is more tractable than the changelog suggests. A staged path: build tooling, compat mode, then component-by-component.
Vue 2 reached end of life at the close of 2023: no more fixes, no security patches, and an ecosystem that has moved on. Teams still running it are accumulating risk quietly. The good news is that the migration industry's scariest stories mostly come from apps that attempted big-bang rewrites, and the staged path is far more forgiving.
Stage the work, do not heroize it
- Inventory first: list dependencies with Vue 3 support gaps; Vuetify, old router plugins, and abandoned component libraries decide your critical path.
- Modernize tooling: move to Vite and current test runners while still on Vue 2.7, which backports
<script setup>and the Composition API so new code is written Vue 3 style before the switch. - Flip with the migration build:
@vue/compatruns Vue 3 with Vue 2 behavior, warning on every deprecated pattern; burn the warnings down module by module. - Finish: drop compat mode, swap Vuex for Pinia where convenient, and let new features pay the dividend.
The breakage that actually bites
Most templates survive untouched. What bites: filters (gone, become computeds or methods), $on/event-bus patterns (gone, become composables or a tiny emitter), v-model on components (renamed prop and event), and functional components (plain functions now). Reactivity's Proxy rewrite removes the old array-index and property-addition caveats, which fixes more bugs than it creates, but any code that relied on those caveats needs a look.
Keep shipping while migrating
Budget the migration as a stream of small pull requests alongside features, not a freeze. Component tests are your safety net, and the modules with none get them first, since the migration will stress exactly the code nobody understands anymore. Teams that stage it this way consistently report the same surprise: the dread was worse than the work.
Services related to this content
Ready to put this into practice?
Here's where I can help you build it.
- Nuxt / VueCustom Nuxt sites, Vue apps, and dashboards. View service
- UX/UI & HTMLRedesigns and rebrands, email design, HTML, and deployment. View service
- WebflowDesigner-led marketing sites on Webflow CMS. View service
Plans bill the time tracked on a subscription, or one price on a fixed rate. Contact if this is the work you want done.
More Vue guides
From the same topic.
VueThe Composition API: Mental Models That Click
VueNuxt Rendering Modes, Explained Simply
VueState Management with Pinia: Less Than You Think
VueDesigning Vue Components People Enjoy Using
VueData Fetching in Nuxt: useFetch, useAsyncData, and $fetch
VueVue Performance: Finding and Fixing the Slow Parts
VueTypeScript with Vue: A Pragmatic Setup
VueTesting Vue Apps: What to Test and What to Skip