vue3-pubsub

Getting started

Introducing our custom Vue.js 3 event bus package, designed to simplify the communication between components in your application. With this package, you can easily emit and listen to events across different components, without the need for complex props drilling or other workarounds. Simply install the package, import the event bus object, and start emitting and listening to events using simple syntax. Try it out today and see how it can improve the structure and performance of your Vue.js 3 application!

Installation

To install with npm:

npm i vue3-pubsub

To install with yarn:

yarn add vue3-pubsub

Usage

This event bus has been implemented as a plugin. 1.import the plugin in the main.js: this plugin uses provide/inject, when you choose provider name, you will be able to inject it with that name through your components.

import Vue from 'vue';
import EventBus from "vue3-pubsub"

Vue.use(vue3-pubsub , {name:"$eventBus"}); // name: your provider name

2.trigger an event:

cosnt $eventBus = inject("$eventBus")
$eventBus.trigger("logger" , "==== THIS IS THE TRIGGERED DATA ====")

2.listen to the event:

cosnt $eventBus = inject("$eventBus")
$eventBus.on("logger" , function(data){
  console.log(data)
  // result: "==== THIS IS THE TRIGGERED DATA ===="
})

3.remove the event:

cosnt $eventBus = inject("$eventBus")
$eventBus.off("logger")