In Vue2, the Event Bus was a popular pattern for facilitating communication between components that were not directly related in the component tree. The simplicity of new Vue() as an event hub made it straightforward to emit and listen for events across components. However, with Vue3, the framework has undergone significant changes, including the removal of the Vue constructor, which necessitates a reevaluation of how to implement event buses.

The Challenge in Vue3

In Vue3, Vue.createApp() returns an application instance that does not have the $on, $emit, or $off methods available in Vue2. This change means that developers must find alternative solutions to implement cross-component communication without relying on the deprecated Event Bus pattern.

Solutions for Implementing Event Bus in Vue3

Using Third-Party Libraries

One of the recommended approaches is to use a third-party library like mitt. This lightweight event emitter library is easy to integrate and use in Vue3 applications.

Implementation Steps:

Install mitt using npm:

npm install --save mitt

In your main.js, create an instance of mitt and attach it to the global properties of your Vue application:

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter;
app.mount("#app");

Use the emit method to send events from one component:

// In Header.vue
<script>
export default {
  methods: {
    toggleSidebar() {
      this.emitter.emit("toggle-sidebar", !this.sidebarOpen);
    }
  }
};
</script>

Listen for events in another component:

// In Sidebar.vue
<script>
export default {
  mounted() {
    this.emitter.on("toggle-sidebar", (isOpen) => {
      this.isOpen = isOpen;
    });
  }
};
</script>

Using Composition API

For those who prefer to stick with Vue's native capabilities, the Composition API offers a way to create a custom event bus without relying on external libraries.

Implementation Steps:

Creating an Event Bus Composable

// useEventBus.js
import { ref } from "vue";
const events = ref({});
export function useEventBus() {
  const emit = (eventName, data) => {
    if (!events.value[eventName]) {
      events.value[eventName] = [];
    }
    events.value[eventName].push(data);
  };
  const on = (eventName, callback) => {
    if (!events.value[eventName]) return;
    events.value[eventName].forEach(callback);
  };
  return { emit, on };
}

Using the Event Bus:

// In ComponentA.vue
import { useEventBus } from "./useEventBus";
export default {
  setup() {
    const { emit } = useEventBus();
    emit("sidebarCollapsed", true);
  },
};
// In ComponentB.vue
import { useEventBus } from "./useEventBus";
import { watchEffect } from "vue";
export default {
  setup() {
    const { on } = useEventBus();
    watchEffect(() => {
      on("sidebarCollapsed", (val) => {
        console.log("Sidebar collapsed:", val);
      });
    });
  },
};

Conclusion

While the Event Bus pattern is no longer natively supported in Vue3, developers have several viable alternatives to achieve cross-component communication. Whether using a lightweight third-party library like mitt or leveraging the powerful Composition API, Vue3 provides robust mechanisms for managing component interactions. As you migrate your Vue2 applications to Vue3, consider these solutions to ensure a smooth transition and maintain efficient event management across your components.

By adapting to these new patterns, you can not only keep your codebase up-to-date but also take advantage of Vue3's enhanced features and improved performance.