Vue Events backbone

HAVE YOU NOTICED?

In Vue, custom events emitted from the script section of a SFC file, do not propagate through the components virtual dom. They will reach their direct parent only. Wouldn't it be nice if these events could bubble up and be freely listened for by parent components?

NOW YOU CAN

With this Vue 3 plugin you can do exactly this in a easy and fast way.

Infact it replicates the DOM events bubble, but applied to custom events in Vue Components, including sending custom data, stopPropagation and once functions.

And actually you can do much more.

This plugin offers a "listen all events" keyword, a transformEvent function to call inside handlers and a Hierarchical Events Structure.

 

FEATURES

NO VUE 3 EMITS MODIFICATIONS

Vue 3 devs have made a clear decision to not include this feature. In order to not interfere with their decision, this plugin does its own job in its own way, trying to replicate vue emitters-listeners system where possible and adding its own features.

ASYNC HANDLERS EXECUTION

To avoid clogging the main thread, handlers execution is asynchronous.

Furthermore, each time an emitter is called, it returns the promise related to that specific emission, if you need to know when it has finish its work.
Ah you need to track some async handlers?

Not a problem sir, you have just to pass a parameter to the emitter function and internally it will await for asynchronous code before fulfilling the promise.

STOP-PROPAGATION AND ONCE

DOM Events has a friendly stopPropagation function to avoid that the event will bubble up further.
The Event Object passed to the handlers functions registered in this plugin have the same "stopPropagation" function that does exactly the same. 
In addition, the Event Object has also a "once" function to unregister the handler immediately afetr its execution (replicates the once option of addEventListener).
So you have the flow control of these kind of events.

TRANSFORM-EVENT

Do you have to emit a Event B when a Event A reaches a component, stopping at the same time Event A? 
No problem, the Event Object passed to handler functions have also a "transformEvent" function to take care of this case. It allows also to edit or rewrite Event Data originally passed.

ERROR HANDLING

Like DOM Events, errors are caught and printed in console with useful informations. So handlers that explode do not stop other handlers execution and you will know what is happening and where.

LISTEN ALL

Do you need a component that will listen to all custom events emitted from its children?This plugin allows it with a simple keywordwhen registering event listeners.

GLOBAL EVENTS

Sometimes it could be useful to just emit and event that must be listened not only by the ancestors of the component that emitted the event, but also by all components currently mounted that listen for that event.
This plugin allows this with just a parameter passed in the emitter function when called.

EVENT HIERARCHY NAMING

Last but not least, a feature that I found interesting to add.

Let's say that, for example, you have various children components that in determined context emit events FOO:A, FOO:B and FOO:C.
Finally you have a main component that has to listen for FOO:A, FOO:B and FOO:C events but it mustn't listen for other events. 

You can register listeners in that main component with "FOO" key and, when those children components will emit their "FOO:" events, they will all be handled by that main component.

Generally speaking, you can define a "tree event structure" with colons in events naming.