Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Migration Guide

Explore essential strategies for migrating Vue 2 projects to Vue 3. Understand how to replace deprecated event methods, avoid filters by using methods, and adapt to updated lifecycle hooks. This lesson helps you prepare your existing Vue codebase for a smooth transition with practical examples and migration tips.

We'll cover the following...

Even if we’re not planning to migrate our Vue 2 project to Vue 3 immediately, there are a few things that we can already do to make the migration process more straightforward.

These are:

  • Avoid using $on, $off, and $once
  • Avoid using filters
  • Pass classes explicitly via props
  • Use the data option
  • Use the emits option
  • Avoid functional components
  • Avoid keyCodes

Avoid the ＄on, ＄off, and ＄once methods

Vue 2

Vue has its own event system, and in Vue 2, components had access to the ＄on, ＄off, and ＄oncemethods to listen for events emitted on components. These methods were usually used for the event bus pattern where a root or new empty Vue instance was used for communication between components and to listen for lifecycle hooks like so:

Javascript (babel-node)
created() {
    window.addEventListener('scroll', this.onScroll)
    this.$on('hook:beforeDestroy', () => {
        window.removeEventListener('scroll', this.onScroll)
    })
}

Let’s run the following code and look at the event bus example in Vue 2:

Note: The code ...