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:

  1. Enable Vue 3's migration build, which supports most Vue 2 APIs with deprecation warnings, to catch breaking changes incrementally.
  2. Upgrade Vue Router to v4 and Vuex (or migrate to Pinia) to their Vue-3-compatible versions, migrating stores module by module.
  3. 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.
  4. Maintain dual test/CI coverage throughout to catch regressions.
  5. 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.