vue-events
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

vue-events

Easy event handling for Vue applications.

3.1.0  •  Updated 2 years ago  •  by Cody Mercer  •  MIT License

A Vue.js plugin that simplify events.

Works with both Vue 1.0 & Vue 2.0.

Installation

1.) Install package via Yarn or NPM
$ yarn add vue-events

$ npm install vue-events
2.) Install plugin within project.
import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)

window.Vue = require('vue')
require('vue-events')

Methods

Method Params Description Docs
vm.$events.$emit event, payload Emit the event with the given payload. vm.$emit
vm.$events.emit event, payload Emit the event with the given payload. Alias for vm.$events.$emit vm.$emit
vm.$events.fire event, payload Emit the event with the given payload. Alias for vm.$events.$emit vm.$emit
vm.$events.$on event, callback Listen for the event with the given callback. vm.$on
vm.$events.on event, callback Listen for the event with the given callback. Alias for vm.$events.$on vm.$on
vm.$events.listen event, callback Listen for the event with the given callback. Alias for vm.$events.$on vm.$on
vm.$events.$off event, callback Remove event listener(s) for the event vm.$off
vm.$events.off event, callback Remove event listener(s) for the event. Alias for vm.$events.$off vm.$off
vm.$events.remove event, callback Remove event listener(s) for the event Alias for vm.$events.$off vm.$off

Usage

The $events prototype object.

This plugin extends Vue.prototype to include a new $events object, which is a just a plain vm that will serve as your global event bus. The $events vm has a couple aliases for the standard event methods.

Firing an event

There are 3 methods that fire events.

Note: $events.fire & $events.emit are aliases for $events.$emit

new Vue({

  data() {
    return {
      eventData: {
        foo: 'baz'
      }
    }
  },

  mounted() {
    this.$events.fire('testEvent', this.eventData);
    this.$events.emit('testEvent', this.eventData);
    this.$events.$emit('testEvent', this.eventData);
  }

})

Listening for an event

There are 3 methods that register event listeners.

Note: $events.listen & $events.on are aliases for $events.$on.

new Vue({
  mounted() {
    this.$events.listen('testEvent', eventData => console.log(eventData));
    this.$events.on('testEvent', eventData => console.log(eventData));
    this.$events.$on('testEvent', eventData => console.log(eventData));
  }
})

Removing an event listener

There are 3 methods that remove event listeners.

Note: $events.off & $events.remove are aliases for $events.$off.

new Vue({
  mounted() {
    this.$events.on('testEvent', eventData => console.log(eventData));
  },

  beforeDestroy() {
    this.$events.$off('testEvent')
    this.$events.off('testEvent')
    this.$events.remove('testEvent')
  }
})

Demo

If you’d like to demo vue-events try vue-mix

License

MIT

Popularity

Stars
220

Maintenance

Development

Last ver 2 years ago
Created 4 years ago
Last commit 1 year ago
25 days between commits

Technology

Node version: 8.8.0
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

6 contributors
Cody Mercer
Maintainer, 31 commits, 7 merges
Arthur Vasconcelos
3 commits, 1 PRs
Matt McCray
2 commits, 1 PRs
Works at Elucidata unLTD
Amr A.Mohammed
1 commits, 1 PRs
Works at Web-Point
Daniel
1 commits, 1 PRs
Stefan Bauckmeier
1 commits

Tags

Vue
events
bus
plugin
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.