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.


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.

Never miss a post from Chris Gregori, when you sign up for Ednsquare.