DEV Community

Cover image for Event Bus Pattern in Nuxt 3 with full TypeScript support

Event Bus Pattern in Nuxt 3 with full TypeScript support

Israel Ortuño on November 17, 2022

I needed to run certain actions at some common user interactions. These interactions could also be the same but in totally different parts of the a...
Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski

Really good article!

Just to make it bit more Vue/Nuxt 3 way, I think it would have been useful to wrap the logic from last chapters of the article into a composable like useEmitEvent and useListenEvent (names can be choosen better :D )

But overall really nice one!

Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski

You could pass the name of the event as the first parameter and value as the second one. Thanks to that you could make the composable auto imported so that user would not have to import nuxtApp everytime :)

Collapse
 
kissu profile image
Konstantin BIFERT

Jakub is on fire on Dev. 🔥🔥🔥

Collapse
 
israelortuno profile image
Israel Ortuño

Added a composable example, thanks for the feedback

Collapse
 
gianlucadev profile image
Gianluca Zicca

Build a nuxt module around mitt - Nuxt-Mitter

I would be grateful for any feedback or suggestions for improvement

npm-nuxt-mitter

Collapse
 
gkkirilov profile image
Georgi Kirilov

Isn't this solved in a nicer way by state management plugins like pinia?

Collapse
 
israelortuno profile image
Israel Ortuño

Not sure about Pinta making it that simple but for sure there are multiple ways to get similar behaviour. Even @atinux suggested using unjs/hookable twitter.com/Atinux/status/15946800...

Collapse
 
gkkirilov profile image
Georgi Kirilov

thanks, will check that also

Collapse
 
sixindustries profile image
Bryan

Thank you @israelortuno this is a great explanation. I've been searching for this answer for a couple days now and this simple, yet carefully explained example, is just money. Much appreciated.

Collapse
 
eserdinyo profile image
Muhammet ESER

Here is my composable solution with hooks.
gist.github.com/eserdinyo/5acf5924...

ref: twitter.com/Atinux/status/15946800...

Collapse
 
fanvvv profile image
Fan

Hi, this is great, how to write the type of emit and on please, thanks!

Collapse
 
bendwarn profile image
Bendwarn

What's the difference with unjs/hookable used by nuxt?