Send message from Luigi Client to Luigi container

[BossHogg97]

Hi, i'm working with @luigi-project/client and @luigi-project/container inside Vue3 project. I'm trying to send a message from client app to container.

Inside client i wrote the following code for send custom message:

LuigiClient.sendCustomMessage({ id: 'language-reset', data: {...} })

I doesn't know how can i receive a custom message inside container component. I tried to write the following code but it doesn't work:

luigiContainerRef.value.addEventListener('language-reset', (event) => {
  console.log('Language reset [CONTAINER APP')
})

Any suggestion? Thanks

[hardl]

Hi @BossHogg97 ,

that would be sth. like this:

		luigiContainerRef.value.addEventListener('custom-message', (e) => {
			if(e.detail?.id === 'language-reset') {			
				console.log(e.detail.data);
			}
		});

[BossHogg97]

I tried to implement the solution has you wrote but i got this error:
TypeError: Cannot read properties of null (reading 'addEventListener')

[hardl]

sorry, there was a typo, two dots... but it is also just an assumption from your example that the luigiContainerRef.value is the dom element instance of the luigi container, please adjust accordingly

[BossHogg97]

I saw the typo and wrote the code correctly. I have the above error with the correct code :(

Following the code i wrote for container:

<script setup lang="ts">
  import '@luigi-project/container'
  .....
  const luigiContainerRef = ref(null)
  ....
  luigiContainerRef.value.addEventListener('custom-message', (e) => {
      if (e.detail?.id === 'language-reset') {
        console.log('Language reset [HORIZON]', e.detail.data)
      }
    })
</script>
<template>
     .....
     <luigi-container ref="luigiContainerRef" :viewURL="props.url" :context="contextJson" />
     .....
</template>

Thanks

[hardl]

Rather a vuejs lifecycle issue, try to wrap it with onMount to make sure the dom element has been created

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import '@luigi-project/container'
...
const luigiContainerRef = ref(null)
...
onMounted(() => {
  luigiContainerRef.value.addEventListener('custom-message', (e) => {
      if (e.detail?.id === 'language-reset') {
        console.log('Language reset [HORIZON]', e.detail.data)
      }
    })
})

</script>
<template>
     .....
     <luigi-container ref="luigiContainerRef" :viewURL="props.url" :context="contextJson" />
     .....
</template>

[BossHogg97]

I tried to wrap the event listener inside onMounted hook and is working. Thanks for the support <3