Why and how to create an Event Bus in Vuejs 3

Valerio Barbera

Have you ever used an event bus in Vue 2 and don’t know how to recreate it in Vue 3?

Since I’m working on the 2.0 version of my product’s UI (to be released in May) I’m publishing some technical tricks I learn migrating my application from Vuejs 2 to Vuejs 3.

The current version of the Inspector frontend application uses a global event bus to deal with some edge cases. It’s needed to make the root component of the application (App.vue) aware of some particular events fired inside the components chain.

Before going into the details of this specfic implementation let me describe the principles of components communication in Vuejs and why we decided to use a global event bus even if this is a not recommended practice.

Vuejs components communication

In Vuejs each component is responsible to render a piece of UI users are interacting with. Sometimes components are self-sufficient. They can retrieve data directly from the backend APIs. More often a component is a child of a more structured view that need to pass data to child components in order to render a specific part of the UI.

Components can expose props to their parents. Props are the data a component needs from a parent to make its work. 

In the example below the component needs the user object to render its name with different styles based on its role.

<template>
    <span :class="{'text-danger': user.is_admin}">
        {{user.first_name}} {{user.last_name}}
    </span>
</template>
<script>
export default {
    props: {
        user: {
            type: Object,
            required: true
        }
    }
}
</script>

This strategy enforces reusability and promotes maintainability, and it is the best practice.

But, this works only for components with a direct relation in the tree, like a Menu.vue component that use the User.vue component to show the user name:

<template>
    <div class="menu">
        <a href="#" class="menu-item">
            Home
        </a>
        <a href="/user" class="menu-item">
            <User :user="user"/>
        </a>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {}
        };
    },
    created() {
        axios.get('/api/user').then(res => this.user = res.data);
    }
}
</script>

How can unrelated components communicate?

Vuejs global state

There are basically two ways of making unrelated components communicate with each other:

  • Pinia (Vuex in the previous version)
  • Event Bus

Pinia is a state management library. At first glance it seems complicated, and in fact it is a bit. You can use Pinia to store data that should be used globally in your app. Pinia provides you with a solid API to apply changes to this data and reflect them in all child components that use Pinia data store.

Event bus is related to the classic Events/Listeners architecture. You fire an event that will be treated by a listener function if there is one registered for that event.

98% of the stuff in your typical app is not a function, but really state. So you should use Pinia for everything as a default, and drop back to an Event Bus when Pinia becomes a hurdle.

Event Bus use case (our scenario)

I have come across a scenario where I need to run a function not to manage a state. So Pinia (or Vuex) doesn’t provide the right solution.

In Inspector the link to access the form for creating a new project is spread in several parts of the application. When the project is successfully created the application should immediately redirect to the installation instruction page. No matter where you are in the application, we must push the new route in the router to force navigation.

(project) => {
    this.$router.push({
        name: 'projects.monitoring',
        params: {
            id: project.id
        }
    });
};

How to create an event bus in Vue3

Vue 2 has an internal event bus by default. It exposes the $emit() and $on() methods to fire and listen for events. 

So you could use an instance of Vue as event bus:

export const bus = new Vue();

In Vue 3, Vue is not a constructor anymore, and Vue.createApp({}); returns an object that has no $on and $emit methods.

As suggested in official docs you could use mitt library to dispatch events across components.

First install mitt:

npm install --save mitt

Then I created a Vue plugin to make a mitt instance available inside the app:

import mitt from 'mitt';

export default {
    install: (app, options) => {
        app.config.globalProperties.$eventBus = mitt();
    }
}

This plugin simply add $eventBus global property to the Vue instance so we can use it in every component calling this.$eventBus.

Use the plugin in your app instance:

import { createApp } from 'vue';
const app = createApp({});
import eventBus from './Plugins/event-bus';
app.use(eventBus);

Now we can fire the event “project-created” from the project form to fire the function defined in the App.vue component:

this.$eventBus.emit('project-created', project);

The global listener is placed in the root component ofthe app (App.vue).

export default {
    created() {
        this.$eventBus.on('project-created', (project) => {
            this.$router.push({
                name: 'projects.monitoring',
                params: {
                    id: project.id
                }
            });
        });
    }
}

It will push the new route into the router redirecting the user to the application installation instructions.

New to Inspector? Try it for free now

I hope this article can help you make better decisions for the design of your application.

Are you responsible for application development in your company? Consider trying my product Inspector to find out bugs and bottlenecks in your code automatically. Before your customers stumble onto the problem.

Inspector is usable by any IT leader who doesn’t need anything complicated. If you want effective automation, deep insights, and the ability to forward alerts and notifications into your messaging environment try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

Related Posts

Create a query for histogram charts with MySQL – Tutorial

To create a statistical query to build a histogram chart with MySQL, you can use the COUNT() function along with GROUP BY to count occurrences of values within a specified range or category created by the grouping constraint.  Especially for time series data there are a lot of use cases for histograms like monitoring the

Try the new Google Chat notification channel

Hi, I’m happy to announce that Google Chat is now available as a notification channel for your application. Now you can receive all important notifications of what happens in your application in your Google Chat environment in real time. Inspector Notification Channels allow you to create an automated and  informed workplace, helping your collaborators to

AI content creation to help you improve the Developer Experience

Co-founders are the first people in the trenches for any start-up, taking the idea and turning it into a sustainable business that can really make other people’s life better. In these early years of Inspector I have never told about my co-founders thanks to whom I was able to spend all my time building the