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/[email protected]"></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.
