Event Bus implementation in Vue

In any application data sharing among various components/services are key to maintaining data flow. In vue, different data-sharing methods are:

1. Props: Allow to pass data from parent to child component.
2. Emit: Allow to pass data from child to parent component.
3. Vuex Store: Allow to share data across components.

Apart from the above three, there is another technique to share data across the components is Event Bus which works on the pub-sub model.

Event Bus technique in vue, emits an event from one components (publisher) and other components (subscribers) will listen to the event in real time and act.

The event bus implementation in vue is a global instance like vuex store. Let's see this as an example of How to implement it.

In this example, I’m using Vue@2.7.0 and mitt@2.1.0. mitt. mitt is a javascript library that helps to achieve event bus implementation.

Implementation

Step 1: First we will be creating a vuejs application and then creating a global instance of the event bus using the mitt library. In my case, I created a folder named ‘eventbus’ and add the index.ts file.
eventbus => index.ts

import mitt from 'mitt';
export default mitt();

Step 2: Now adds three different components, where the first component will emit (publish) an event to pass the message and the other two components will listen to the event and display the message.

components => HelloMessagePublish.vue

<template>
  <div class="hello">
    <input v-model="message" />
    <button @click="onPublish">publish</button>
  </div>
</template>
<script>
import eventbus from "@/eventbus";
export default {
  name: "HelloMessagePublish",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    onPublish() {
      eventbus.emit("getMessage", this.$data.message);
    },
  },
};
</script>

The above component has an input control to accept the user input and publish this message through emitting an event ‘getMessage’ on click of publish button here.

components => HelloMessageDisplay.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
import eventbus from "@/eventbus";
export default {
  name: "HelloMessageDisplay",
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    eventbus.on("getMessage", (e) => {
      this.$data.msg = e;
    });
  },
};
</script>

In the above component here, the component is subscribing to the event name ‘getMessage’ inside the mounted hook.

similarly will add the third component which is a duplicate of the above for example purposes only.

components => HelloMessageDisplay2.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
import eventbus from "@/eventbus";
export default {
  name: "HelloMessageDisplay2",
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    eventbus.on("getMessage", (e) => {
      this.$data.msg = e;
    });
  },
};
</script>

Step 3: Register all the components in App.vue.

<template>
  <div id="app">
    <HelloMessagePublish />
    <HelloMessageDisplay />
    <HelloMessageDisplay2 />
  </div>
</template>
<script>
import HelloMessageDisplay from "./components/HelloMessageDisplay";
import HelloMessageDisplay2 from "./components/HelloMessageDisplay2";
import HelloMessagePublish from "./components/HelloMessagePublish";
export default {
  name: "App",
  components: {
    HelloMessageDisplay,
    HelloMessageDisplay2,
    HelloMessagePublish,
  },
};
</script>

Now run the application, type the message in the textbox and click on publish button, message will appear in the UI through an event bus notification.

easy-peasy! isn’t it? Hope you enjoyed the content, follow me for more like this, and please don’t forget to clap for it. Happy programming.