vue-event-handler

A Vue.js plugin that provides a global event bus and a couple helper methods.

Works with both Vue 1.0 & Vue 2.0.

Installation

1.) Install package via NPM

npm install vue-event-handler

2.) Install plugin within project.

import Vue from 'vue';
import VueEvents from 'vue-event-handler';

Vue.use(VueEvents)

or

window.Vue = require('vue');
require('vue-event-handler');

Usage

The $events prototype object.

This plugin extends Vue.prototype to include a new $events object. The $events object is a simple Vue model which includes couple aliases for the vm.$emit & vm.$on methods. An event when registered becomes globally available and thus can be handy while passing data between components.

Registering an event

There are a couple of methods that can be used to register an event and attach a handler method. Option 1 & 2 are functionally identical, and so is Option 3 & 4.

new Vue({

	mounted () {
		// Option 1 - Keeps listening until destroyed
        this.$events.listen('eventName', eventData => console.log(eventData));
        
        // Option 2 - Keeps listening until destroyed
        this.$events.on('eventName', eventData => console.log(eventData));
		
		// Option 3 - Listens only once and then stops responding to the trigger, but is not destroyed
        this.$events.listenOnce('eventName', eventData => console.log(eventData));
		
		// Option 4 - Listens only once and then stops responding to the trigger, but is not destroyed
        this.$events.once('eventName', eventData => console.log(eventData));
	}
})

Firing an event

There are 2 methods that fire events. Both options are functionally identical.

new Vue({

    data() {
        return {
            eventData: {
                foo: 'baz'
            }
        }
    },
    
    mounted() {
        // Option 1
        this.$events.fire('eventName', this.eventData);
        
        // Option 2
        this.$events.emit('eventName', this.eventData);
    }
    
})

Destroying an event

There is a method to de-register/destroy an event listener. These method becomes handy whenever the scope of a Vue component is lost and the event was being used locally.

new Vue({

	beforeDestroy () {
		// Option 1 - Destroys an event
		this.$events.off('eventName');
		
		// Option 2 - Destroys an event
		this.$events.unlisten('eventName');
		
		// Option 3 - Destroys all event listeners globally
		this.$events.removeAll();
	}
})

License

MIT