Using Event Bus in Vue.js 3

#javascript #vue #vite #frontend

Introduction

In vue js we have essentially three ways of making unrelated components communicate with each other:

Vuex
Pinia
Event Bus

On the official documentation we can read:

In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term.

So generally in the long run it is better to use vuex.

Also in the official documentation you can see how the Event Bus implementation has changed from Vue 2 to Vue 3

Scaffolding the project

In this tutorial we will use Vite build tool to scaffold the project

# npm 6.x
npm init vite@latest vue-event-bus-1 --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest vue-event-bus-1 -- --template vue

then we need to install an external library implementing the event emitter interface, in this case mitt

npm install --save mitt

The Project

The project consists of two simple components, FirstComponent.vue and SecondComponent.vue, when we click on the emit event button in SecondComponent.vue String to change in **FirstComponent.vue **becomes String changed thanks to the Event Bus

The Code

In **main.js **we create an instance of mitt which is used globally

import { ***createApp ***} from 'vue'
import mitt from 'mitt'
import App from './App.vue'


const emitter = mitt()
const app = ***createApp***(App)

app.config.globalProperties.emitter = emitter
app.mount('#app')

Now we can access emitter globally, so in FirstComponent.vue we subscribe to the event emitted by SecondComponent.vue.

Let’s take a look to FirstComponent.vue

<script>
export default {
  data: function () {
    return {
      testEvent: 'String to change'
    }
  },
  created (){
    this.emitter.on('my-event', (evt) => {
      this.testEvent = evt.eventContent;
    })
  }
}
</script>

Now in **SecondComponent.vue **let’s emit the event

<template>

    <div style="border: 1px solid black;">

        <h1>Second Component</h1>

        <button v-on:click="emitMyEvent">Emit Event</button>

    </div>

</template>

<script>

    export default {

        methods: {

          emitMyEvent() {

              this.emitter.emit('my-event', {'eventContent': 'String changed'})

          }

        }

    }

</script>

Github

You can find the code of this tutorial on github: CertosinoLab/mediumarticles at vue-event-bus-1 (github.com)

Thank you for reading!

Top comments (3)

Aaron Reese • May 8 '23

You also have the options of prop drilling (passing prop arguments from the parent component through all the children to the required component) and event emitter chaining to move up the tree - but it is discouraged. You also have the inject functionality in Vue3 but I think this an advanced feature.
Pina is the preferred (and official) store library for Vue3 rather than vuex