Back
VueHardNew
How would you migrate a large Vue 2 application (with Vuex and Vue Router 3) to Vue 3?
Compatibility build, incremental migration, strangler fig pattern
Ideal Answer
A typical phased migration approach:
- Enable Vue 3's migration build, which supports most Vue 2 APIs with deprecation warnings, to catch breaking changes incrementally.
- Upgrade Vue Router to v4 and Vuex (or migrate to Pinia) to their Vue-3-compatible versions, migrating stores module by module.
- Refactor components from the Options API to the Composition API incrementally, component by component — not required, but often done alongside the migration to modernize the codebase.
- Maintain dual test/CI coverage throughout to catch regressions.
- Replace deprecated APIs (filters,
$listeners, global mixins/Vue.extend, etc.) as flagged by migration build warnings.
This mirrors the 'strangler fig' pattern — gradually replacing legacy code without a risky full rewrite.