gitmyhub

vuebus

TypeScript ★ 8 updated 3y ago

A simple event bus in Vue 2.x

VueBus is a lightweight tool for sending messages between different parts of a Vue 2 application without needing them to be directly connected. Think of it like a messaging system: one part of your app can broadcast that something happened (like a user logging in), and other parts can listen for that message and react accordingly.

In a typical Vue app, if Component A needs to tell Component B something changed, they usually have to pass data through parent components or use other complex patterns. VueBus lets you skip that middleman. You create a bus instance, then any component can emit events to it or listen for events from it. For example, when a user logs in, you'd emit a userLoggedIn event, and any component listening for that event would immediately know to update itself—maybe showing a welcome message or revealing new features.

The library keeps things simple. You can emit an event with or without data attached to it, listen for single or multiple events at once, and clean up listeners when you no longer need them. It even lets you attach the bus to Vue's global prototype so you can access it anywhere in your app with this.$vuebus—no need to pass it around as a prop. The library is built with TypeScript, meaning it has type safety built in for developers who use that.

You'd reach for VueBus when you have Vue 2 components that need to communicate without being nested within each other, or when you want a cleaner alternative to prop drilling (passing data down through many levels of components). It's especially useful for cross-cutting concerns like authentication state changes, notifications, or theme switching—things where multiple unrelated parts of your UI need to know something happened.