VueJs global event dispatcher

readme.md

Use Example

const GlobalEvent = require('./event');
window.Event = new GlobalEvent();

Then you can listen for events from other Vue components

export default {
    methods: {
        myHandler() {
            alert('Do something');
        }
    },
    created() {
        Event.listen('myEvent', (data) => this.myHandler(data));
    }
}

Also you can fire those events from anywhere

Event.fire('myEvent', {foo: "bar"});

Learn more

This was taken from laracasts: Component Communication Example #2: Event Dispatcher

event.js

class Event {
  constructor() {
    this.vue = new Vue();
  }

  fire(event, data = null) {
    this.vue.$emit(event, data);
  }

  listen(event, callback) {
    this.vue.$on(event, callback);
  }
}

module.exports = Event;

Hi @jeffochoa. Thank you for a gist. Where should I paste const GlobalEvent = require('./event'); ?

@bolatk anyplace global to the application, like the initial app.js file

Thx, simple and clean, good job !!!