Vue eventbus2

Event Bus for Vue.js Components

Version: 2.0.0 Updated: 02/20/2018

By: mohannadnaj

Downloads Last 30 Days: 31


npm i vue-eventbus2
yarn add 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, ...

npm version npm downloads Build Status Coverage Status



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')})'my-event', {some: "data"})
// > {some: "data"}'another-event'})
// > another-event is triggered


Register Events Listeners

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

Use the listen method to set event listeners:

EventBus.listen('add-task', (task) => {

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

Firing Events |required, data |optional)

Use the fire method to fire events:'add-task', {status: 'completed'});'log-data', `log me!`);'log-data');


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


let vm = new Vue();

vm.$'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();'some event')


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.


Assert that the given event name is fired.'test1')

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


Assert that the given event name is not fired.'test1')

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


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..


Get a list of the recorded fired events.'one')'two')

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


Get a list of the recorded fired events.


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


Clears the recorded fire/listen events.'test');'test2');


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

Useful to be used within beforeEach or afterEach spec methods:

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

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

  beforeEach(() => {

  it('do something', () => {'hello')


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



The MIT License (MIT).

Categories: Vue js