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
 
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
 
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
 
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?

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.