VueBus

A dead-simple event bus for Vue 2.

Installation

Install VueBus with yarn or npm:

yarn add @phanan/vuebus
# or
npm install @phanan/vuebus

Usage

First, import and initialize a new VueBus instance:

import VueBus from '@phanan/vuebus'

const bus = new VueBus()

Emit an event

bus.emit('userLoggedIn')
bus.emit('userLoggedIn', 'with', 'additional', data)

Listen to events

With VueBus, you can listen and react to one event:

bus.on('userLoggedIn', () => this.sayHello())

or an array of events:

bus.on(['userLoggedIn', 'userLoggedBackIn'], () => this.sayHello())

By passing an object of { eventName: callbackFunction } shape, you can listen to several events and react to each of them with a different callback:

bus.on({
  userLoggedIn () {
    this.sayHello()
  },

  userLoggedOut () {
    this.sayGoodbye()
  }
})

once and off

VueBus's once and off behave exactly like their Vue counterparts.

Attach to Vue.prototype

VueBus can attach itself to Vue.prototype and become available as an instance property with the attach function . By default, you can access VueBus as this.$vuebus, but the property name can be customized by passing a string as an argument.

(new VueBus()).attach()

// VueBus is now available as a Vue's instance property
this.$vuebus.emit('userLoggedIn')

// Use a custom property name
(new VueBus()).attach('$bus')
this.$bus.emit('userLoggedIn')

License

MIT © Phan An