Event Bus implementation in Vue

 In any application data sharing among various components/services are key to maintain 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 above three, there is an another technique to share data across the components is, Event Bus which works on 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. Lets see this by an example on 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 helps to achieve event bus implementation.

Implementation

Step 1: First we will be creating a vuejs application and then create an global instance of event bus using mitt. 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 first component will emit (publish) an event to pass the message and other two components will listen 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>

Above component has a 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 above component here, component is subscribing the event name ‘getMessage’ inside the mounted hook.

similarly will add the third component which is duplicate of above for example purpose 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 UI through 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 like/comment for it. Happy programming.