Event handling plugin for VueJS

Last update: Jul 30, 2020

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

GitHub

https://github.com/sandeepk01/vue-event-handler
You might also like...

Simple, quick custom directive for handling currency format inside text inputs.

Vue-currency-directive Simple, quick custom directive for handling currency format inside text inputs. Compatible with Vue 2.x Demo/Playground Install

Mar 31, 2022

Vue event bus plugin listening for online/offline changes

Vue event bus plugin listening for online/offline changes

vue-connection-listener Vue event bus plugin listening for online/offline changes About Whenever the navigator's connection status changes a 'connecti

Jul 15, 2022

Vue directive plugin for drag event detection.

v-dragged Vue directive plugin for drag event detection. NOTE: This directive listens for mouse/touch events, and sets a handler for when a drag actio

Aug 11, 2022

Vue directive plugin for drag event detection.

v-dragged Vue directive plugin for drag event detection. NOTE: This directive listens for mouse/touch events, and sets a handler for when a drag actio

Jun 6, 2022

A Vue js Global Event Bus plugin using the power of Observable

Vue-geb - Global Event Bus Vue-geb is a vue Global Event Bus plugin to help broadcast events across the app using the power of observables. Only add 5

Jan 14, 2021

Tiny simple central event bus plugin for Vue.js

vue-bus A tiny simple central event bus plugin for Vue.js (requires Vue = 2.0). The plugin realise Non Parent-Child Communication. (655 byte gzip) In

Aug 8, 2022

A full event display calendar for the Quasar framework that has multiple viewing formats.

A full event display calendar for the Quasar framework that has multiple viewing formats.

Daykeep Calendar An event display calendar for the Quasar framework. Formerly known as Quasar Calendar, Daykeep Calendar for Quasar is a Quasar-flavor

Aug 16, 2022

πŸ‘‹ Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection and on creation. Good for GDPR requirements.

vue-cookie-accept-decline Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an ev

Jul 23, 2022

A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.

A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.

vue-lumino An example project showing one way to integrate Vue.js and Lumino (nΓ©e PhosphorJS). Lumino β€œis a library for building interactive web appli

Jul 1, 2022

Fires an event on a specific scroll position

vue-scrollfire Fires an event on a specific scroll position Demo Install npm install --save-dev vue-scrollfire // [email protected] npm install --save-dev vue-s

Feb 18, 2022

πŸ”² Vue directive to react on clicks outside an element without stopping the event propagation

v-click-outside Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues and menus amon

Aug 8, 2022

:running: Vue.js directive to add a document event listener on escape keyup.

vue-esc πŸƒ Vue.js directive to add a document event listener on escape keyup. Support Vue.js 2 = [email protected]=2.0.0 [master] Vue.js 1 = [email protected] I

May 5, 2022

Event-Based communication across opened tabs for Vue 2.x

Event-Based communication across opened tabs for Vue 2.x

vue-tabevents Easy communication between tabs for Vue 2.x Getting Started Installing Install with npm: npm install --save vue-tabevents import into pr

Jul 2, 2022

Global keypress event handler component for Vue.js applications.

Global keypress event handler component for Vue.js applications.

Vue Keypress Want to capture keydown, keypress and keyup and events globally in Vue? Nothing easier than that. The Vue Keypress Component let's you do

May 6, 2022

Fires an event on a specific scroll position

vue-scrollfire Fires an event on a specific scroll position Demo Install npm install --save-dev vue-scrollfire // [email protected] npm install --save-dev vue-s

Feb 18, 2022

πŸ”² Vue directive to react on clicks outside an element without stopping the event propagation

v-click-outside Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues and menus amon

Aug 12, 2022

:running: Vue.js directive to add a document event listener on escape keyup.

vue-esc πŸƒ Vue.js directive to add a document event listener on escape keyup. Support Vue.js 2 = [email protected]=2.0.0 [master] Vue.js 1 = [email protected] I

May 5, 2022

Event-Based communication across opened tabs for Vue 2.x

Event-Based communication across opened tabs for Vue 2.x

vue-tabevents Easy communication between tabs for Vue 2.x Getting Started Installing Install with npm: npm install --save vue-tabevents import into pr

Jul 2, 2022

Global keypress event handler component for Vue.js applications.

Global keypress event handler component for Vue.js applications.

Vue Keypress Want to capture keydown, keypress and keyup and events globally in Vue? Nothing easier than that. The Vue Keypress Component let's you do

May 6, 2022
A Vue js Global Event Bus plugin using the power of Observable

Vue-geb - Global Event Bus Vue-geb is a vue Global Event Bus plugin to help broadcast events across the app using the power of observables. Only add 5

Jan 14, 2021
Tiny simple central event bus plugin for Vue.js

vue-bus A tiny simple central event bus plugin for Vue.js (requires Vue >= 2.0). The plugin realise Non Parent-Child Communication. (655 byte gzip) In

Aug 8, 2022
The event manager for Vue.js

vue-event-manager The plugin for Vue.js provides a declarative way to bind events to a global event manager. It uses the Vue lifecycle to automaticall

Apr 23, 2022
Simple event handling for Vue.js

vue-events A Vue.js plugin that simplify events. Works with both Vue 1.0 & Vue 2.0. Installation 1.) Install package via Yarn or NPM $ yarn add vue-ev

Apr 20, 2022
Event portal for associations that enables an information flow to the members and to simplify the member and event management

EventPortal Event portal for associations that enables an information flow to the members and to simplify the member and event management. Starting Vu

Feb 21, 2022
A simple Vue 3 plugin for handling browser cookies with typescript support

A vue 3 plugin for handling browser cookies with typescript support. Load and save cookies within your Vue 3 application

Aug 2, 2022
Asynchronous form handling and validation for VueJS forms

Asynchronous form handling and validation for VueJS forms

Sep 24, 2019
Vue.js library for handling REST service requests and model definitions.

Vue service model Vue.js Library for handling REST service requests with caching, aggregation and model definitions. Features Define models and easily

Jan 15, 2022
A tiny library for handling JSONP request.

Vue-jsonp A tiny library for handling JSONP request. Quick Start As Vue plugin: import { VueJsonp } from 'vue-jsonp' // Vue Plugin. Vue.use(VueJsonp)

Aug 7, 2022
A lightweight library for handling hierarchical content. With full customizations of items rendering.
A lightweight library for handling hierarchical content. With full customizations of items rendering.

A lightweight library for handling hierarchical content. With full customizations of items rendering.

Jun 2, 2022