Nuxt3 issues ?

[bloor]

I`m struggling to make it work with a nuxt3 project (static , ssr:false).

Basically it DOES emit the events, but it's harder to receive them.
I added this in: current component , sub-component, sub-sub-component
emitter.on('*', () => { alert(1)});

And only the one in the current component is triggered. Don't seem to be able to go cross-components. Might be because of how nuxt encapsulates the components _ .. but currently I have no easy solution for "global" events..

[bloor]

I actually made it work, BUT integrating it as a Nuxt Plugin, following this
https://github.com/nuxt/framework/discussions/2288#discussioncomment-2204699

Guess being bundled as a plugin it has more reach between components.

[rrindels]

I actually prefer a Nuxt3 Composable for this instead of a plugin. @/composables/useMitt.ts

import mitt from 'mitt'
interface LogMessage{
severity: string,
message: string
}
type ApplicationEvents = {
'application:log' : LogMessage
};
const emitter = mitt<ApplicationEvents>()
emitter.on('application:log' , ( type , message ) => console.log( type, message ))
export const sendEvent = emitter.emit
export const useListen = emitter.on

Then in your components sendEvent and useListen are just available.

Example of sendEvent in Component
<script setup lang="ts">
sendEvent('application:log',{ severity: 'Critical', message: 'Oh No It Failed'})
</script>

Example of useListen in Component
<script setup lang="ts">
useListen('application:log', async (logMessage) =>{
// Do something with logMessage like send to a northbound server log.
await postToServer( 'LogMessage' , logMessage.severity , logMessage.message );
};
</script>