Building a global event bus for Vue.js

basic-usage.js

// Using the most basic event bus

import Vue from 'vue';
import Bus from './basic';

Vue.component('my-first-component', {
  methods: {
    sampleClickAction() {
       Bus.$emit('my-sample-event');
    }
  }
});

Vue.component('my-second-component', {
  created() {
    Bus.$on('my-sample-event', () => {
      // Do something…
    });
  }
});

basic.js

// The most basic event bus

// Imprt vue.js
import Vue from 'vue';

// Create empty vue.js instance to use as event bus
const Bus = new Vue({});

// Export event bus instance
export default Bus;

Nice. What about for unit testing this global event bus? How would one go about doing it?

Do not forget the .$off in beforeDestroy to avoid memory leak

Another example, using the bus in a slightly different way.

// events.ts
import { Component, Vue } from "vue-property-decorator";
import debounce from "debounce";

// b-img-lazy nested inside b-carousel issue
// see https://github.com/bootstrap-vue/bootstrap-vue/issues/1210
const updateCarouselImages = debounce(() => {
  window.dispatchEvent(new Event("scroll"));
}, 100);

@Component
class EventBus extends Vue {
  created() {
    this.$on("b:carousel:img:next", updateCarouselImages);
  }
  beforeDestroy() {
    this.$off("b:carousel:img:next", updateCarouselImages);
  }
}

export default new EventBus();

// thumbnail.ts
import { Component, Vue } from "vue-property-decorator";
import eventBus from "@/lib/events";
@Component
export default class Thumbnail extends Vue {
  mounted() {
    eventBus.$emit("b:carousel:img:next");
  }
}