Vue.js 2 to 3 Migration: Preparing Your Codebase

Vue 3 is coming soon. If you have Vue 2 applications, now’s the time to prepare. Here’s how to get ready for the migration.

Breaking Changes to Address

• Filters removed: Replace with computed or methods
• $on, $off, $once removed: Use external event bus
• v-model changes: Multiple v-model support
• Functional components: Simpler syntax

Filters Migration

<!-- Vue 2 -->
{{ price | currency }}

<!-- Vue 3 - Use computed or method -->
{{ formatCurrency(price) }}

methods: {
  formatCurrency(value) {
    return new Intl.NumberFormat('en-US', { 
      style: 'currency', currency: 'USD' 
    }).format(value);
  }
}

Event Bus Migration

// Vue 2 - Component-based bus
const bus = new Vue();
bus.$on('event', handler);

// Vue 3 - Use mitt or tiny-emitter
import mitt from 'mitt';
const emitter = mitt();
emitter.on('event', handler);

Preparation Steps

1. Update to Vue 2.7 (backports some Vue 3 APIs)
2. Remove deprecated patterns
3. Add TypeScript types (optional but helpful)
4. Use the official migration build when available

References

• Vue 3 Migration Guide