Vue.js 3 Event Bus

Question

How to create Event Bus in Vue 3?

---

In Vue 2, it was:

export const bus = new Vue();

Answer 1

As suggested in official docs you could use mitt library to dispatch events between components, let suppose that we a sidebar and header which contains a button that close/open the sidebar and we need that button to toggle some property inside the sidebar component :

in main.js import that library and create an instance of that emitter and define as a global property:

Installation :

 npm install --save mitt

Usage :

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt';
const emitter = mitt();
let app=createApp(App)
app.config.globalProperties.emitter = emitter
app.mount('#app')

in header emit the toggle-sidebar event with some payload :

In sidebar receive the event with the payload:

For those using composition api they could use emitter as follows :

import { getCurrentInstance } from 'vue'
export default{

   setup(){
      const internalInstance = getCurrentInstance(); 
      const emitter = internalInstance.appContext.config.globalProperties.emitter;

       ...
     },
  ...

}