vue-eventbus2

Event Bus for Vue.js.

The Event Bus is a publish-subscribe pattern implementation to ease the communication between routines that doesn't know much about each other.

This Event Bus for Vue.js will act as an intermediary message broker between your different components. So you may tell it to do something from component A, then you will "fire" that action in component B, and C, ...

Contents

• Quickstart
• API
• Installation
• Testing
• Credits
• License

Quickstart

npm install vue-eventbus2 --save

window.Vue = require('vue')
window.EventBus = require('vue-eventbus2')

EventBus.listen('my-event', function(data) {console.log(data)})
EventBus.listen('another-event', function() {console.log('another-event is triggered')})

EventBus.fire('my-event', {some: "data"})
// > {some: "data"}

EventBus.fire('another-event'})
// > another-event is triggered

API

Register Events Listeners

EventBus.listen(eventName |required, callback |required)

Use the listen method to set event listeners:

EventBus.listen('add-task', (task) => {
    console.log(task.status);
});

EventBus.listen('log-data', (data = `In the bus`) => {
    console.log(data)
});

Firing Events

EventBus.fire(eventName |required, data |optional)

Use the fire method to fire events:

EventBus.fire('add-task', {status: 'completed'});

EventBus.fire('log-data', `log me!`);
EventBus.fire('log-data');

Installation

Adding the package

npm install vue-eventbus2 --save
# or
yarn add vue-eventbus2 --save

Importing the package

1. Globally

The preferred usage of this package is to require it globally once:

window.Vue = require('vue') // vue-eventbus2 will look here or `global.Vue` to see where to find Vue
window.EventBus = require('vue-eventbus2')

2. Building

You may find it more convenient if you build the EventBus by passing the Vue instance your self:

let Vue = require('vue')
let EventBus = require('vue-eventbus2/builder')(Vue)

3. as a Plugin

You may prefer to use it as a Vue Plugin without exposing it to any global object, this way it will be associated to the main Vue instance which will be inherited to each Vue instance/component. read more about Vue Plugins.

You can import it as a plugin by requiring vue-eventbus2/plugin, this will set the Event Bus as a $bus property in the main Vue instance.

let Vue = require('vue')
let EventBusPlugin = require('vue-eventbus2/plugin');

Vue.use(EventBusPlugin);

let vm = new Vue();

vm.$bus.fire('some event')

4. as a Plugin with a custom property name

If you didn't like the $bus property name, change it by passing the preferred name as an option:

let Vue = require('vue')
let EventBusPlugin = require('vue-eventbus2/plugin');

Vue.use(EventBusPlugin, 'MyEventBus'); // passing the name as an option

let vm = new Vue();

vm.MyEventBus.fire('some event')

---

Testing

this Event Bus shipped with the following built-in testing helpers.

Behind the scenes, the Event Bus only needs the equal assertion, it will check whether to use jasmine's expect(object).toEqual or chai's expect(object).to.equal and will act accordingly.

expectEvent(eventName)

Assert that the given event name is fired.

EventBus.fire('test1')

EventBus.expectEvent('test1') // Pass
EventBus.expectEvent('test2') // Fail..

notExpectEvent(eventName)

Assert that the given event name is not fired.

EventBus.fire('test1')

EventBus.notExpectEvent('test1') // Fail
EventBus.notExpectEvent('test2') // Pass..

expectListenEvent(eventName)

Assert that the given event name is being listened to.

EventBus.listen('test1', () => {console.log(`I'm a listener!`)})

EventBus.expectListenEvent('test1') // Pass
EventBus.expectListenEvent('test2') // Failed, no one is listening to the poor test2..

getFireHistory()

Get a list of the recorded fired events.

EventBus.fire('one')
EventBus.fire('two')

EventBus.getFireHistory() // ['one','two']

getListenHistory()

Get a list of the recorded fired events.

EventBus.listen('one')
EventBus.listen('two')

EventBus.getListenHistory() // ['one','two']

clearHistory()

Clears the recorded fire/listen events.

EventBus.fire('test');
EventBus.fire('test2');
EventBus.listen('test2');

EventBus.clearHistory();

EventBus.getFireHistory(); // []
EventBus.getListenHistory(); // []

Useful to be used within beforeEach or afterEach spec methods:

window.EventBus = require('vue-eventbus2')

describe('My spec', () => {

  beforeEach(() => {
    EventBus.clearHistory()
  })

  it('do something', () => {
    EventBus.fire('hello')
  })  
});

fresh()

Alias for clearHistory except it will also return the EventBus instance.

Useful to be used within beforeEach or afterEach spec methods:

  beforeEach(() => {
    EventBus = EventBus.fresh()
  })

Contribution & Build Setup

# install dependencies
npm install

# run unit tests and watch file changes
npm run watch

# run all tests and check code coverage
npm test

Credits

• Jeffrey Way for This lesson on laracasts.
• Webpack Template from Vue.js-Templates

License

The MIT License (MIT).