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.
- 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)
You can install it via yarn or NPM.
$ yarn add vue-event-manager
$ npm install vue-event-manager
Available on jsdelivr or unpkg.
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>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')
}
}
}Details changes for each release are documented in the release notes.
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.