Vue-geb is a vue Global Event Bus plugin to help broadcast events across the app using the power of observables.

Only add 5kb to the rxjs library.

Demo

npm install --save vue-geb

Or

yarn add vue-geb

In your main.js :

import geb from 'vue-geb' Vue.use(geb) 

Example usage with modals

this.$geb.getBus() // Observable:Subject type 

this.$geb.emit({object}) 

this.sub = this.$geb.getBus().subscribe(data => { console.log(data) // Do anything you want with 'data' })

this.sub = this.$geb.getFilteredBus({id:'modal'}).subscribe(data => { console.log(data) // The callback is only called when an event is fired with at least the id attribute equal to 'modal' })

<button v-geb-click-emit="{id:'foo',payload:'Lorem'}">Send</button>

Notice how we use this.sub = ... .subscribe(). You need to unsubscribe when your component unmount to avoid memory leaks.

destroyed: function () { if(this.sub) { this.sub.unsubscribe() } },

Please check this example for a vue-geb modal usage.

You can also access the same api as vm.$geb outside of vue context (same Event bus too):

import { gebHandler } from 'vue-geb' gebHandler.emit({object}) 

This is useful for vue-geb usage in a state management library or any other js file.

Enjoy ! :)