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

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