[Feature Request]: Built-in Event System for Nuxt

[martinszeltins]

Describe the feature

Problem & Solution

Most backend frameworks like Laravel and Symfony have a built-in event system. You can dispatch and listen to events and have a place to monitor all events happening in your app. This would be a very useful feature to have built into Nuxt itself with a NuxtDevtools plugin to monitor all events.

Currently, if you want to have events in your Nuxt app, you can use VueUse EventBus composable or install the mitt package or use hookable from unjs. But none of them integrate well with Nuxt, lack SSR support, or offer Nuxt DevTools integration to monitor events in real time.

At our company, we use VueUse event bus and have built a custom NuxtDevtools module around it to be able to monitor events. It doesn't have SSR support, no async support etc. And VueUse may not even be the best option. While it works for us, it would be great to have a proper, well thought out event system as a first-class citizen in Nuxt like in other frameworks.

Why Events?

Nuxt itself is no stranger to events - it is built around events using hookable. Events is what allows to create modular and extensible software. This is one of the reasons why Nuxt is so great. And when building large, enterprise level Nuxt applications, modularity is not merely an option - it is a necessity. It helps keep code organized and managable.

For example - this is our own internal NuxtDevtools "Events" module. It allows you to record events, search, filter by type, see payloads etc.
For reference: vueuse/vueuse#4290 (comment)

Laravel
Laravel has a powerful Event System and monitoring.

Symfony
Symfony also has a built-in event system.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[huang-julien]

Thanks for this feature request. That's very interesting !

I think this can probably be moved into a module. Either a Nuxt or a Nitro module.

[martinszeltins]

I looked into this some more and found out that it is already possible to add your own custom hooks and call them. And it looks like hookable already provides a debugger which I think by default logs everything out to the console but I assume it is not difficult to make the logs available in a NuxtDevtools module.

// Register an event listener
nuxtApp.hook('my-custom-hook', (event) => {
    console.log('My custom hook triggered:', event)
})

// Emit an event
const nuxtApp = useNuxtApp()

nuxtApp.callHook('my-custom-hook', {
    message: 'Hello from the settings module!',
})

So it looks like Nuxt already has a powerful event system built-in just missing a central place to monitor all events that are emitted and what listeners are being called.

Feel free to correct me if I'm wrong about all of this.

[danielroe]

@martinszeltins Yes, I would think so!

You can also add types for them by extending the RuntimeNuxtHooks type (docs).

I'll mark this as closed but if you think we can do any more, let me know; I'd be happy to reopen.

And maybe worth opening an issue with devtools if you think we need to add additional logging there?

[martinszeltins]

@danielroe Thanks for the reply. Scratching my own itch here I think we should also add a proper page dedicated for Events. There is some documentation regarding how to augment Runtime Hooks but it would be nice to have a proper page for how to use events / hooks. I think they're called "Events" in every other framework so I think it would make sense to talk about events even though under the hood it is implemented using hookable, wdyt?

And I agree that it is worth opening an issue with Devtools to have a nice logging page there.

Also, maybe @TheAlexLichter might want to consider creating a video on how to use custom hooks / events in Nuxt. That would be awesome! 🙏🏻 😉

[martinszeltins]

@danielroe opened a PR to document custom events - #31977

[huang-julien]

Should have asked for more details... I thought you wanted an message based communication system like MassTransit for ASP.NET, but for nitro.