Vue-event-manager NPM

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 automatically bind and unbind all events.

Features

Supports event priorities and Promise based asynchronous events
Supports latest Firefox, Chrome, Safari, Opera and IE9+
Supports Vue 2.0
Compact size 3KB (1,5KB gzipped)

Installation

You can install it via yarn or NPM.

$ yarn add vue-event-manager
$ npm install vue-event-manager

CDN

Available on jsdelivr or unpkg.

<script src="https://cdn.jsdelivr.net/npm/vue-event-manager@2.1.3"></script>

Example

Try the example on jsfiddle.

new Vue({

  created() {

    // trigger event
    this.$trigger('someEvent', {foo: 'bar'});

  },

  events: {

    // event handler (priority 0)
    someEvent(event, param) { ... },

    // event handler (priority 10)
    earlyEvent: {

        // handler callback
        handler(event, param) { ... },

        // a higher priority, means earlier execution
        priority: 10

    },

    // event handler (priority -10)
    lateEvent: {

        // handler callback
        handler(event, param) { ... },

        // a lower priority, means late execution
        priority: -10

    }

  }

});

Lets see how easy you can watch global events like reactive properties! (Like in this example). Let's assume you have a logout button in any component template and want it to be handled somewhere else without these nasty $on(...) and $off(...) lines in the created and destroy hooks.

<!-- logoutButton.vue -->
<button @click="$trigger('logout:the-user')">Logout</button>

// userManager.vue
export default {

  name: 'any-other-component',

  events: {
    // the event name string binds the method name string
    'logout:the-user': 'logout'
  },

  methods: {
    // this method will be called everytime the event occurs
    logout (event, param) {
      this.$http.post('/logout')
    }
  }

}