Vuejs setting up event bus

I usually do a separation with the EventBus.

eventbus.js

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

Then i simply do an import in every component that needs to listen for event. On bigger projects I would even create a events.js and eventListener.js file and then handle everything there.

With complete separation

eventbus.js

This will be our event bus and is used from all other places.

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

event.js

This file is basically a library of common events. This makes it easier to maintain.

import { EventBus } from './Eventbus.js';
import { Store } from './Store.js'; // If needed

class Event {

    // Simple event
    static showMessage(message) {
        EventBus.$emit('showMessage', message);
    }
}

eventlistener.js

Event listener for our common events. Again this makes it easier to maintain. This could be in the same event file, but I like the separation.

import { EventBus } from './Eventbus.js';

class EventListener {

    // Simple event listener
    static showMessage() {
        EventBus.$on('showMessage', function() {
            alert(message);
        });
    }

    // Simple event listener with callback
    static showMessage(callbackFunction) {
        EventBus.$on('showMessage', callbackFunction);
    }
}

ComponentA.vue

A random component. Imports the EventBus and Event collection as it is used somewhere in the vue component.

<template>
    *SOME HTML*
</template>

<script>

    import { Event } from 'event.js'
    import { EventBus } from 'eventbus.js';

    export default {
        methods: {
            throwAlert: function() {
                Event.showMessage('This is my alert message');
            }
        }
    }
</script>

ComponentB.vue

A random component. Imports the EventBus and EventListener collection as it is suppose to react on events on the eventbus.

<template>
    *SOME HTML*
</template>

<script>

    import { EventListener } from 'eventlistener.js'
    import { EventBus } from 'eventbus.js';

    export default {
        mounted() {

            // Will start listen for the event 'showMessage' and fire attached function defined in eventlistener.js
            EventListener.showMessage();

            // Will start listen for the event 'showMessage' and execute the function given as the 'callbackFunction' parameter. This will allow you to react on the same event with different logic in various vue files.
            EventListener.showMessage(function(message) {
                alert(message);
            });
        }
    }
</script>