https://github.com/pagekit/vue-event-manager
The event manager for Vue.js
https://github.com/pagekit/vue-event-manager
events javascript vue
Last synced: 7 months ago
JSON representation
The event manager for Vue.js
- Host: GitHub
- URL: https://github.com/pagekit/vue-event-manager
- Owner: pagekit
- License: mit
- Archived: true
- Created: 2017-04-26T11:25:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:04:20.000Z (about 3 years ago)
- Last Synced: 2025-04-18T03:05:25.110Z (8 months ago)
- Topics: events, javascript, vue
- Language: JavaScript
- Homepage:
- Size: 3.03 MB
- Stars: 82
- Watchers: 7
- Forks: 13
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-event-manager - The event manager for Vue.js ` 📝 a year ago` (Utilities [🔝](#readme))
- awesome-vue-zh - Vue事件管理器 - Vue.js的全球事件经理. (公用事业 / 自定义事件)
- awesome-vue - vue-event-manager ★62 - The global event manager for Vue.js. (Utilities / Custom Events)
- awesome-vue - vue-event-manager - The global event manager for Vue.js. (Utilities / Custom Events)
- awesome-vue - vue-event-manager - The global event manager for Vue.js. (Components & Libraries / Utilities)
README
# vue-event-manager [](https://circleci.com/gh/pagekit/vue-event-manager) [](https://www.npmjs.com/package/vue-event-manager) [](https://www.jsdelivr.com/package/npm/vue-event-manager) [](https://www.npmjs.com/package/vue-event-manager) [](https://www.npmjs.com/package/vue-event-manager)
The plugin for [Vue.js](http://vuejs.org) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://yarnpkg.com) or [NPM](https://npmjs.org).
```
$ yarn add vue-event-manager
$ npm install vue-event-manager
```
### CDN
Available on [jsdelivr](https://cdn.jsdelivr.net/npm/vue-event-manager@2.1.3) or [unpkg](https://unpkg.com/vue-event-manager@2.1.3).
```html
```
## Example
Try the example on [jsfiddle](https://jsfiddle.net/gh/get/library/pure/pagekit/vue-event-manager/tree/master/examples/demo/).
```js
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](https://vuejs.org/v2/examples/commits.html)).
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.
```html
Logout
```
```js
// 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](https://github.com/pagekit/vue-event-manager/releases).
## Contribution
If you find a bug or want to contribute to the code or documentation, you can help by submitting an [issue](https://github.com/pagekit/vue-event-manager/issues) or a [pull request](https://github.com/pagekit/vue-event-manager/pulls).
## License
[MIT](http://opensource.org/licenses/MIT)