Open bloor opened 2 years ago
bloor
commented
2 years ago 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
commented
1 year ago 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>
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..