In Vue 2, developers often used an event bus (a new Vue instance) to send and listen for events across components. However, this pattern was removed in Vue 3 to encourage clearer, more maintainable communication.

Let’s see how to safely implement an event bus in Vue 3 using the Composition API.

Creating a Vue 3 Event Bus with mitt

The most recommended way to create an event bus in Vue 3 is by using mitt, a tiny functional event emitter.

Step 1 – Install mitt

npm install mitt

Step 2 – Create the Event Bus

// eventBus.jsimport mitt from ‘mitt’

 

const emitter = mitt()

export default emitter

Step 3 – Register it globally

import { createApp } from ‘vue’import App from ‘./App.vue’

import emitter from ‘./eventBus’

 

const app = createApp(App)

app.config.globalProperties.emitter = emitter

app.mount(‘#app’)

Step 4 – Emit and listen to events in components:

<!– ComponentA.vue –>export default {

  mounted() {

    this.emitter.emit(‘custom-event’, ‘Hello from A’)

  }

}

<!– ComponentB.vue –>export default {

  mounted() {

    this.emitter.on(‘custom-event’, (msg) => {

      console.log(‘Received:’, msg)

    })

  }

}

Alternative Approaches

Here are the three alternatives:

1. Props and Emits

Use props to send data from parent to child and emits for the reverse.

2. Provide / Inject

Scoped injection of values without prop drilling.

// Parentapp.provide(‘theme’, ‘dark’)

 

// Child

const theme = inject(‘theme’)

3. Pinia or Vuex

Best for app-wide state and reactive event-driven logic.

Also Read:

Best Practices

  • Avoid global event spam – only use for cross-cutting concerns
  • Always clean up listeners – use onUnmounted()
  • Prefer props/events or stores for tightly-coupled or data-rich flows
  • Use descriptive event names – like ‘cart:add-item‘ or ‘notification:open‘

Key Takeaway

Vue 3 removed the native event bus to improve app structure, but using a library like mitt lets you implement a clean, performant alternative. Keep events scoped and manageable, and always unsubscribe to avoid leaks.

Related Resources