How To Create a Global Event Bus in Vue 2

Introduction

The event bus / publish-subscribe pattern is a way of getting unrelated sections of your application to talk to each other.

The event system used in Vue components can be used in an event bus / publish-subscribe pattern.

In this article, you will apply Vue’s powerful built-in event bus.

Prerequisites

To complete this tutorial, you will need:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Some familiarity with setting up a Vue.js project and using Vue.js components may be beneficial.

This tutorial was verified with Node v15.3.0, npm v6.14.9, and vue v2.6.11.

Step 1 — Setting Up The Project

For the purpose of this tutorial, you will build from a default Vue project generated with @vue/cli.

npx @vue/cli create vue-event-bus-example --default

This will configure a new Vue project with default configurations: Vue 2, babel, eslint.

Navigate to the newly created project directory:

cd vue-event-bus-example

You will need to create the event bus and export it somewhere so other modules and components can use it. First, create a new file. Import the Vue library. Then, export an instance of it.

import Vue from 'vue';
export const EventBus = new Vue();

For this tutorial, the instance was set to the variable EventBus.

What you are essentially getting is a component that is entirely decoupled from the DOM or the rest of your app. All that exists on it are its instance methods.

Now that you have created the event bus, you will need to import it into your components and call the same methods that you would use if you were passing messages between parent and child components.

Next, let’s apply EventBus.$emit().

Step 2 — Sending Events

Consider a scenario with a component that notifies the entire app of how many times it has been clicked whenever someone clicks on it.

Here is how you would go about implementing that using EventBus.$emit(channel: string, payload1: any, ...):

<template>
  <button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>

<script>
import { EventBus } from '@/event-bus';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      EventBus.$emit('clicked', this.clickCount);
    }
  }
}
</script>

This code produces a button. Clicking on the button would send the event on a channel (clicked) with a payload (clickCount).

Modify App.vue to use this component.

<template>
  <div id="app">
    <ClickCountButton></ClickCountButton>
  </div>
</template>

<script>
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}
</script>

Next, let’s apply EventBus.$on.

Step 3 — Receiving Events

Now, any other part of your app can import the event bus and listen on the clicked channel using EventBus.$on(channel: string, callback(payload1,...)).

Apply this to your application by modifying App.vue:

<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}

const clickHandler = function(clickCount) {
  console.log(`The button has been clicked ${clickCount} times!`)
}

EventBus.$on('clicked', clickHandler);
</script>

This code creates an event listener for clicked and logs a message to the console with the number of times the button has been clicked.

Next, let’s apply EventBus.$off.

Step 4 — Removing Event Listeners

You can unregister the handler from the clicked channel using EventBus.$off(channel: string, callback(payload1,...)).

Apply this to your application by modifying App.vue:

<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}

const clickHandler = function(clickCount) {
  console.log(`The button has been clicked ${clickCount} times!`)
}

EventBus.$on('clicked', clickHandler);

EventBus.$off('clicked', clickHandler);
</script>

By providing an event and a callback, EventBus.$off will only remove the listener for this specific callback.

Now, you have utilized .$emit, .$on, and .$off.

Conclusion

In this tutorial, you used Vue’s powerful built-in event bus to listen for a clicked event and log a message with the click count. This was achieved by utilizing .$emit, .$on, and .$off.

If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.