@phanan/vuebus NPM

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')