Vue JS

Creating a Global Event Bus with Vue.js

EventBus allows us to emit an event in one component and listen for that event in another.

Golang Community Moderator. Software Engineer - Open Source Enthusiast. Goper Lover

Published · Jul 6 2019

  
The event bus / publish-subscribe pattern, despite the bad press it  sometimes gets, is still an excellent way of getting unrelated sections  of your application to talk to each other. But wait! Before you go waste  a few more precious KBs on another library, why not try Vue’s powerful  built-in event bus?


Initializing
The first thing you’ll need to  do is create the event bus and export it somewhere so other modules and  components can use it. Listen closely. This part might be tricky.
//event-bus.vue
import Vue from 'vue';
export const EventBus = new Vue();

What do you know? Turns out it wasn’t tricky at all!

All you need to do is import the Vue library and export an instance of it. (In this case, I’ve called it EventBus.)  What you’re essentially getting is a component that’s entirely  decoupled from the DOM or the rest of your app. All that exists on it  are its instance methods, so it’s pretty lightweight.

Using the Event Bus
Now  that you’ve created the event bus, all you need to do to use it is  import it in your components and call the same methods that you would  use if you were passing messages between parent and child components.

Sending Events
Say  you have a really excited component that feels the need to notify your  entire app of how many times it has been clicked whenever someone clicks  on it. Here’s how you would go about implementing that using EventBus.emit(channel: string, payload1: any, …).

Receiving Events
Now, any other part of your app kind enough to give PleaseClickMe.vue the attention it so desperately craves can import EventBus and listen on the i-got-clicked channel using EventBus.$on(channel: string, callback(payload1,…)).

If you’d only like to listen for the first emission of an event, you can use EventBus.$once(channel: string, callback(payload1,…)).

Removing Event Listeners
Once a part of your app gets tired of hearing the amount of times PleaseClickMe.vue has been clicked, they can unregister their handler from that channel like so.

You could also remove all listeners for a particular event using EventBus.$off(‘i-got-clicked’) with no callback argument.
If you really need to remove every single listener from EventBus, regardless of channel, you can call EventBus.$off() with no arguments at all.