mitt icon indicating copy to clipboard operation
mitt copied to clipboard

Nuxt3 issues ?

Open bloor opened this issue 2 years ago • 2 comments

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 avatar May 02 '22 21:05 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.

bloor avatar May 02 '22 21:05 bloor

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>

rrindels avatar Oct 20 '23 19:10 rrindels