vue-events

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')
  }
})

The events component options.

Provide an events map as part of your component options and vue-events will automatically call $on when the component is mounted and $off when the component is destroyed.

new Vue({
  events: {
    testEvent(eventData){
       console.log(eventData)    
    }
  }  
})

Inside the event handlers, this is bound to the component instance. This way you can access your component's data, props, computed, methods, etc. For example:

new Vue({
  events: {
    onShowAlert(message){
       this.modalVisible = true
       this.message = message
    }
  }  
})

Demo

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

License

MIT