Vue event manager

The event manager for Vue.js

Version: 2.1.3 Updated: 04/18/2020

By: pagekit License: MIT

Downloads Last 30 Days: 833

vue-event-manager Build Downloads jsdelivr Version License

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')
    }
  }

}

Changelog

Details changes for each release are documented in the release notes.

Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT

Categories: Vue js