Vue-geb - Global Event Bus

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

Demo

Install

npm install --save vue-geb

Use

In your main.js :

import geb from 'vue-geb'

Vue.use(geb)

Example usage with modals

How do i emit an event in the global Event Bus ?

2 ways :

With a directive :

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

When clicked, an event containing {id:'foo',payload:'Lorem'} is emitted inside the Global Event Bus. (Note: you are not constrained by any format, the object format you send is up to you). At the moment you cant use component data in the directive. You can still use vue directives to trigger a component custom method.

With a method inside a Vue Component :

methods: {
            sendToBus: function(){
               this.$geb.emit({id:'someId',payload:this.itCanAlsoBeData})
            }
        }

You can emit event with this method : this.$geb.emit(data)

How do i listen to the Global Event Bus ?

Listen to all the events:

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

Be notified by specific events:

created: function () {
            this._sub = this.$geb.getFilteredBus({id: 'foo'}).subscribe(data => {
                       // you only get events containing at least the attribute id equal to 'foo'
                    }
            )
        },

Don't forget to unsubscribe when you destroy the component to avoid memory leak

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