How to Create a Global Event Bus in Vue 2?

In large Vue.js projects, components that do not have a parent-child relationship may need to communicate.
At this point, Global Event Bus, which works with the **Publish–Subscribe) logic, offers a practical solution.

In this guide, we will create an application-wide accessible Event Bus using Vue 2's built-in event system.

⚠️ Important Note:
This build is for Vue 2 only.
$on, $off and $once have been removed in Vue 3.
Libraries like mitt or tiny-emitter are recommended in Vue 3 projects.

What Will You Learn in This Guide?

• Creating a Vue 2 project with Vue CLI
• Defining a central Event Bus
• Broadcast global events with $emit
• Listening to events with $on
• Prevent memory leaks with $off

---

Prerequisites

• Node.js must be installed
• Basic knowledge of Vue 2 component structure is sufficient

---

1️⃣ Project Setup and Event Bus File

npx @vue/cli create genixnode-event-bus --default
cd genixnode-event-bus

• This command creates a default project based on Vue 2.

---

// src/event-bus.js
import Vue from 'vue';

export const EventBus = new Vue();

• This file produces a Vue instance that is completely independent of the DOM.
• Its function is only to carry events.

---

2️⃣ Send Event ($emit)

<!-- src/components/SayacButonu.vue -->
<template>
  <button @click="tiklamaOlayiniGonder">
    Tıklama Sayısı: {&#123; tiklamaSayisi &#125;}
  </button>
</template>

<script>
import &#123; EventBus &#125; from '@/event-bus';

export default {
  data() {
    return { tiklamaSayisi: 0 };
  },
  methods: {
    tiklamaOlayiniGonder() {
      this.tiklamaSayisi++;
      EventBus.$emit('tiklandi', this.tiklamaSayisi);
    }
  }
}
</script>

• This component emits a global event on every click.

---

3️⃣ Listening to Events ($on)

<!-- src/App.vue -->
<script>
import &#123; EventBus &#125; from './event-bus';
import SayacButonu from './components/SayacButonu';

export default {
  components: &#123; SayacButonu &#125;,
  created() {
    EventBus.$on('tiklandi', (sayi) => {
      console.log(`Butona $&#123;sayi&#125; kez tıklandı`);
    });
  }
}
</script>

• The created() hook is one of the safest places to initialize event listeners.

---

4️⃣ Remove Listeners ($off)

1. The most common mistake when using Event Bus is not clearing the listeners.

• This situation creates a memory leak.

beforeDestroy() {
  EventBus.$off('tiklandi');
}

---

Tips

EventBus.$off('tiklandi', callback) → Tek callback’i kaldırır

EventBus.$off('tiklandi') → O event’in tüm dinleyicilerini kaldırır

EventBus.$off() → Event Bus’ı tamamen temizler

---

Frequently Asked Questions (FAQ)

1. Why Event Bus when there is Vuex? For small and temporary communications, Vuex is unnecessarily heavy.

2. Is Event Bus recommended for large projects? No. In complex projects, Vuex or Pinia should be preferred.

3. What does $once do? It only listens to the event when it is first triggered and closes automatically.

4. What is the alternative in Vue 3? mitt is the most common and lightweight solution.

---

Result

In this guide, you have installed the Vue 2 Global Event Bus structure safely and correctly. You have made the communication between components loosely coupled.

You can safely choose GenixNode servers to run your Vue 2 projects on a high-performance and stable infrastructure 🚀