[Vue.js 3.0] Migration – Events API

# Events API

breaking

# Overview

$on, $off and $once instance methods are removed. Application instances no longer implement the event emitter interface.

# 2.x Syntax

In 2.x, Vue instance could be used to trigger handlers attached imperatively via the event emitter API ($on, $off and $once). This was used to create event hubs to create global event listeners used across the whole application:

// eventHub.js
const eventHub = new Vue()
export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'
export default {
mounted() {
// adding eventHub listener
eventHub.$on('custom-event', () => {
console.log('Custom event triggered!')
})
},
beforeDestroy() {
// removing eventHub listener
eventHub.$off('custom-event')
}
}

// ParentComponent.vue
import eventHub from './eventHub'
export default {
methods: {
callGlobalCustomEvent() {
eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
}
}
}

# 3.x Update

We removed $on, $off and $once methods from the instance completely. $emit is still a part of the existing API as it's used to trigger event handlers declaratively attached by a parent component

# Migration Strategy

Existing event hubs can be replaced by using an external library implementing the event emitter interface, for example mitt(opens new window) or tiny-emitter(opens new window).

These methods can also be supported in compatibility builds.