Vue 2 → Vue 3
hardVue 2 is EOL (Dec 2023). Vue 3 brings Composition API, Teleport, Suspense, and better TypeScript support. Major breaking changes in reactivity system and template compilation.
Estimated: 16-40h · 5 steps
Progress0%
Step 1: Run migration build
Vue 3 has a migration build that runs Vue 2 code with warnings for incompatible patterns.
npm install vue@3 @vue/compat
Step 2: Fix global API changes
Vue.component() → app.component(). Vue.use() → app.use(). New Vue() → createApp().
Step 3: Migrate to Composition API
Optional but recommended. Options API still works. Use <script setup> for concise components. ref() and reactive() replace data().
Step 4: Update Vuex to Pinia
Vuex 3/4 → Pinia (officially recommended). defineStore replaces modules. Better TypeScript support.
npm install pinia && npm uninstall vuex
Step 5: Fix template changes
v-model breaking changes, key on v-if branches, v-bind merge order changed. Run vue-codemod for automated fixes.
✓ All components render, reactivity works, router navigates correctly.