How To Create A Global Event Bus With Vue.js

An event bus is a pub/subpattern. Means one component publishes an event and another component subscribes to that event. So one component Vue component emits an event with some data, and another component subscribes to that event and receives that data. 

It is a quick way to passing the data from parent to child or child to the parent component. The Universal solution for passing the data between Vue components is Vuex centralized state management library. Still, for a small-scale web application, we can use the Event Bus architecture to pass them between the components.

Global Event Bus With Vue.js

For simple web architecture, it is enough to communicate between components using events. The quick solution to this problem is to implement EventBus. EventBus allows us to emit an event from one component and listen for that event in another component.

Now, let us implement EventBus in Vue.js.

Step 1: Install Vue.js.

We will install Vue.js using the Vue CLI.

npm install -g @vue/cli
# or
yarn global add @vue/cli

Then create a new project using the following command.

vue create ebus

Global Event Bus With Vuejs

Step 2: Architecture of EventBus.

Now, first, we need a mechanism to transfer an event from components. So first, let us create that mechanism using Vue.js.

First, go to the project folder if you are not in there.

cd ebus

Now, open the project folder in your editor or IDE.

code .

Now, inside the src directory, create one file called Events.js.

Write the following code inside the Event.js file.

// Events.js

import Vue from 'vue';

export const EventBus = new Vue();

That is it, guys. We have created a Vue instance, and now that instance, we can use it as an Event Bus.

Now any component can emit an event with this instance, and also other components can listen for that event using this event bus.

Step 3: Create an Event EmitterComponent.

Let us create a component inside the src >> components folder.

We name the component as EmitterComponent.vue.

// EmitterComponent.vue

  <button @click="clickMe()"></button>

import { EventBus } from '../Events.js';

export default {
  data() {
    return {
      count: 0

  methods: {
    clickMe() {
      EventBus.$emit('emittedEvent', this.count);

So, when a user clicks the button, it fires a click event, and in that click event, we have called a function.

Here the function name is clickMe(), and that function emits an event using EventBus.

Step 4: Listen to the event.

Create a component inside src >> components folder called ListenComponent.vue.

Write the following code inside ListenComponent.vue file.

// ListenComponent.vue

    Count number is: {{ value }}

import { EventBus } from '../Events.js';

export default {

    data() {
        return {
            value: 0
    mounted() {
        EventBus.$on('emittedEvent', data => {
            this.value = data;

So, I have done the ListenComponent component is ready to listen to the event emitted from EmitterComponent.

When the event is emitted, ListenComponent listens to that event and get the data, and assigns that data.

Now, we can easily display that data.

Step 5: Register both the components.

Now, write the following code inside src >> App.vue file.

// App.vue

  <div id="app">

import EmitterComponent from './components/EmitterComponent.vue'
import ListenComponent from './components/ListenComponent.vue'

export default {
  name: 'app',
  components: {

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

Now, save the file and start the server using the following command.

npm run serve

Go to this link: http://localhost:8080/.

When you click the button, the count is increment every time.

So, we have passed the data successfully from one vue.js component to another component.

Removing Event Listeners

You can unregister the events using the following function.


If you want to remove all event listeners, then you need to write the following code.


You do not need to pass any argument at all.

That’s it for this tutorial.

2 thoughts on “How To Create A Global Event Bus With Vue.js”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.