Simple Event Bus pattern in Vue.js and Nuxt.js

BaseAlert.vue

<template>
</template>

<script>
// Import the Event Bus of Vue instance
import { EventBus } from './event-bus.js'

export default {
  created() {
    (this.$nuxt || EventBus || this.$EventBus).$on('open-alert', this.openAlert)
  },
  beforeDestroy() {
    (this.$nuxt || EventBus || this.$EventBus).$off('open-alert')
  },
  methods: {
    openAlert: ({message}) => alert(`Click event emitted!\n${message}`)
  }
}
</script>

BaseButton.vue

<template>
  <div @click="emitAlertEvent('Just clicked!')">Click me!</div>
</template>

<script>
// Import the Event Bus of Vue instance
import { EventBus } from './event-bus.js'

export default {
  methods: {
    emitAlertEvent(message) {
      (this.$nuxt || EventBus || this.$EventBus).$emit('open-alert', {message})
    }
  }
}
</script>

event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()



// Use Prototype Pattern
/**
Object.defineProperties(Vue.prototype, {
    $eventBus: {
        get: function () {
            return EventBus;
        }
    }
}

export default {
  created() {
    this.$EventBus.$on('open-alert', this.openAlert)
  }
}

**/

page.vue

<template>
  <base-button></base-button>
  <base-alert></base-alert>
</template>

<script>
import BaseButton from './BaseButton.vue'
import BaseAlert from './BaseAlert.vue'
export default {
  components: {
    BaseButton,
    BaseAlert
  }
}
</script>

avoid creating listening ($on) in created cycle if you don't want memory leaks in the SSR mode