How To Create A Global Event Bus With Vue.js

How To Create A Global Event Bus With Vue.js is the today’s leading topic. An event bus is the pub/sub pattern. 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 the 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 are Vuex centralized state management library, but for a small scale web application, we can use the Event Bus architecture to pass the 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

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 src directory, create one file called Events.js.

Write the following code inside 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 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 src >> components folder.

We name the component as EmitterComponent.vue.

// EmitterComponent.vue <template> <button @click="clickMe()"></button> </template> <script> import { EventBus } from '../Events.js'; export default { data() { return { count: 0 } }, methods: { clickMe() { this.count++; EventBus.$emit('emittedEvent', this.count); } } } </script>

So, when a user clicks the button, it fires 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 for the event.

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

Write the following code inside ListenComponent.vue file.

// ListenComponent.vue <template> <div> Count number is: {{ value }} </div> </template> <script> import { EventBus } from '../Events.js'; export default { data() { return { value: 0 } }, mounted() { EventBus.$on('emittedEvent', data => { this.value = data; }); } } </script>

So, what I have done is thatListenComponent 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 assign 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 <template> <div id="app"> <emitter-component></emitter-component> <listen-component></listen-component> </div> </template> <script> import EmitterComponent from './components/EmitterComponent.vue' import ListenComponent from './components/ListenComponent.vue' export default { name: 'app', components: { EmitterComponent, ListenComponent } } </script> <style> #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; } </style>

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.

EventBus.$off('emittedEvent');

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

EventBus.$off();

You do not need to pass any argument at all.

Finally, Create A Global Event Bus With Vue.js is over.