vue-geb
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.
Only add 5kb to the rxjs library.
Install
npm install --save vue-geb
Or
yarn add vue-geb
Use
In your main.js
:
import geb from 'vue-geb'
Vue.use(geb)
Basic usage
Access the Observable bus:
this.$geb.getBus() // Observable:Subject type
Emit Events in the bus:
this.$geb.emit({object})
Listen to the Events in the bus:
this.sub = this.$geb.getBus().subscribe(data => {
console.log(data)
// Do anything you want with 'data'
})
Listen to specific Events in the bus:
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'
})
Vue directive
<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.
Advanced
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 ! :)
Dependencies
Dependencies
vue: ^2.1.10autoprefixer: ^6.7.2babel-core: ^6.22.1babel-eslint: ^7.1.1babel-loader: ^6.2.10babel-plugin-istanbul: ^3.1.2babel-plugin-transform-runtime: ^6.22.0babel-preset-es2015: ^6.22.0babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chai: ^3.5.0chalk: ^1.1.3chromedriver: ^2.27.2connect-history-api-fallback: ^1.3.0cross-env: ^3.1.4cross-spawn: ^5.0.1css-loader: ^0.26.1eslint: ^3.14.1eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.6.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0-rc.2file-loader: ^0.10.0friendly-errors-webpack-plugin: ^1.1.3function-bind: ^1.1.0html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^2.0.1karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-sinon-chai: ^1.2.4karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.26karma-webpack: ^2.0.2lolex: ^1.5.2mocha: ^3.2.0nightwatch: ^0.9.12opn: ^4.0.2ora: ^1.1.0phantomjs-prebuilt: ^2.1.14selenium-server: ^3.0.1semver: ^5.3.0shelljs: ^0.7.6sinon: ^1.17.7sinon-chai: ^2.8.0url-loader: ^0.5.7vue-loader: ^10.3.0vue-style-loader: ^2.0.0vue-template-compiler: ^2.1.10webpack: ^2.2.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.16.1webpack-merge: ^2.6.1