Skip to content
Home / Migrations / Vue 2Vue 3

Vue 2 Vue 3

hard

Vue 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.