Implementing Event Bus with Vue.js

The Event Bus is a pattern that distributes events through a central channel, enabling different parts of the system to remain decoupled. In Vue.js, the Event Bus is typically implemented using an empty Vue instance.

Here's how I implement an Event Bus in a Vue project, along with a scenario where I might use it:

Implementing the Event Bus

1. Create the Event Bus:

javascript
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

1. Use the Event Bus in components:

Emitting Events:

javascript
// ComponentA.vue
<template>
  <!-- Component template -->
</template>

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

export default {
  methods: {
    someMethod() {
      EventBus.$emit('my-event', { someData: 'Some data to send' });
    }
  }
}
</script>

Listening to Events:

javascript
// ComponentB.vue
<template>
  <!-- Component template -->
</template>

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

export default {
  mounted() {
    EventBus.$on('my-event', this.handleMyEvent);
  },
  beforeDestroy() {
    EventBus.$off('my-event', this.handleMyEvent);
  },
  methods: {
    handleMyEvent(payload) {
      console.log('Event received', payload);
      // Handle the event
    }
  }
}
</script>

In this example, ComponentA emits an event my-event with some data. ComponentB listens to this event and defines a method handleMyEvent to process the received event.

Example: Using the Event Bus

Suppose we have an application where one component handles user authentication (e.g., displaying login status), and another component is a modal for login. These components operate at different levels and may not be directly related.

We avoid having each component that needs to know the login status directly communicate with the modal component, as this would lead to high coupling and hard-to-maintain code.

In this case, the Event Bus proves useful:

• When the user successfully logs in via the modal, the modal component emits an event such as login-success.
• The authentication component listens to login-success and updates the user's display status accordingly.

This approach maintains component decoupling while enabling effective communication.

Important Notes

Vue 2.x supports implementing the Event Bus using instance methods like $on, $emit, and $off. However, in Vue 3.x, this pattern is no longer recommended as it contradicts the design principles of Vue 3's Composition API. In Vue 3, it is recommended to use provide/inject, Vuex, or reactive, ref, and watchEffect from the Vue Composition API to share state between components.