vue-event-manager

    2.1.3 • Public • Published

    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

    Install

    npm i vue-event-manager

    DownloadsWeekly Downloads

    350

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    404 kB

    Total Files

    27

    Last publish

    Collaborators

    • steffans