Vue 3 Event Bus Plugin

README.md

Information:

This is simple Event Bus with the vue 3 feature of provide, inject, Symbol.

There are different way to set up.

Credits:

• https://stackoverflow.com/questions/63471824/vue-js-3-event-bus

import { createApp } from 'vue'
import eventBusPlugin from "./eventBusPlugin.mjs"
import App from './components/App.vue'
const app = createApp(App);
app.use(eventBusPlugin);
app.mount('#app');

import { useEmit } from "./eventBusPlugin.mjs"
const emit = useEmit();
function clickTest(){
  //EventBus.emit('test')
  emit('test')
}

import { inject } from "vue"
import { EmitInjectKey } from "./eventBusPlugin.mjs"
const emit = inject(EmitInjectKey);
function clickTest(){
  //EventBus.emit('test')
  emit('test')
}

Not possible to short the useEmit.

There are two and more ways to add and remove listen.

import { inject } from "vue";
import {OnInjectKey} from "./eventBusPlugin.mjs";
const on = inject(OnInjectKey);

on('test',()=>{
  console.log("TEST ROOT !s!!")
})

import {useEmitOn} from "./event/eventBusPlugin.mjs";
const $on = useEmitOn();

$on('test',()=>{
  console.log("TEST ROOT !!!")
})

import {on} from "./event/eventBusPlugin.mjs";

on('test',()=>{
  console.log("TEST ROOT !s!!")
})

eventBusPlugin.mjs

/*
  LICENSE: MIT
  Created by: Lightnet
  Information: note same name call needs be alias if same function for vue.js v3
*/

// https://stackoverflow.com/questions/63471824/vue-js-3-event-bus

import { inject } from "vue";

class EventBusEvent extends Event {
  constructor({type, data}) {
    super(type)
    this.data = data
  }
}

class EventBus extends EventTarget {
  static _instance;

  static getInstance(){
    if (!this._instance) this._instance = new EventBus()
    return this._instance
  }

  emit(type, data){
    this.dispatchEvent(new EventBusEvent({type, data}))
  }
}

export const EmitInjectKey = Symbol();
export const OnInjectKey = Symbol();
export const OffInjectKey = Symbol();

export function useEmit(){
  return inject(EmitInjectKey);
}

export function useEmitOn(){
  return inject(OnInjectKey);
}

export function useEmitOff(){
  return inject(OffInjectKey);
}

//export function emit(type, data){//fail, does not work, emitKey return null
  //console.log("type")
  //console.log(type)
  //const emitKey = inject(EmitInjectKey);
  //console.log(emitKey)
  //emitKey(type, data)
//}

export function on(type, fn){
  const $on = inject(OnInjectKey);
  $on(type, fn)
}

export function off(type, fn){
  const $off = inject(OffInjectKey);
  $off(type, fn)
}

export const eventBusPlugin = {
  install(app, options) {

    const bus = EventBus.getInstance()

    function emit(type,args){
      bus.emit(type,args)
    }
    app.provide(EmitInjectKey, emit)

    function on(type, fn){
      bus.addEventListener(type, fn)
    }
    app.provide(OnInjectKey, on)

    function off(type, fn){
      bus.removeEventListener(type, fn);
    }
    app.provide(OffInjectKey, off)
  }
}
export default eventBusPlugin;