vue-simple-events

Yet another event management plugin, but WITHOUT Vue instance

About

This is just a simple wrapper around js-simple-events that helps to manage events in a simple way without creating a Vue instance. It also supports TypeScript!

And it's really light - ~1kb in size!

API

Methods

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

Component Options

/// Some component.vue
export default {
  // registers event handlers on 'created'
  on: {
    handler(arg) {
      console.log(args)
    }
  },
  // Same as previous, but is called only once.
  once: {
    handler() {
      console.log('Just once')
    }
  }
}

Examples

// Import and initialize
import Vue from 'vue'
import EventManager from 'vue-simple-events'

Vue.use(EventManager)

/// Component 1

methods: {
  eventHandler(payload) {
    console.log('Yay, events work!', payload);
  },
  eventHandlerOnce(payload) {
    console.log('This will be called just once!');
  }
},
created() {
  this.$events.on('test', this.eventHandler);
  this.$events.once('test', this.eventHandlerOnce);
},
beforeDestroy() {
  this.$events.off('test', this.eventHandler);
  this.$events.off('test', this.eventHandlerOnce);
}

/// Component 2

created() {
  // Emit events
  this.$events.emit('test', 'Hello!');
  // Logs:
  // -> Yay, events work! Hello!
  // -> This will be called just once!

  this.$events.emit('test', 'Hello!');
  // Logs:
  // -> Yay, events work! Hello!
  // (The 'once' handler isn't fired)
}

Alternative way to set your event handlers is through the on and once Vue constructor options. In that way you may not worry about removing event handlers in beforeDestroy hook. This approach makes code cleaner and reduces the amount of boilerplate code.

/// Component 1
on: {
  test(payload) {
    console.log('Yay, events work!', payload);
  }
},
once: {
  test(payload) {
    console.log('This will be called just once!');
  }
}

Demo

webpack 4 biolerplate