Parent to child communication in Nuxt 3 app

I have currently a webapp setup with Nuxt 3, Typescript and using Composition API <script setup>

Nuxt has these layout files which I consider as my parent.
So my layouts/default.vue file contains a Quasar side menu called Qdrawer.
In the parent layout file I also have a <NuxtPage /> where my pages are loaded.

One of those pages contains a Leaflet map I want to talk to from the parent Qdrawer.
For example when I click an item in the Qdrawer menu, I want the map to jump to a specific location.

The Qdrawer has build in events that are emitted on all the actions you can think of.
But from my understanding events are used for child to parent communication and you do parent to child with props.

I got thinks working with prop binding, but I had to bind the props to the <NuxtPage \> tag like <NuxtPage :mydrawer="qdrawer-state" \>.
The problem I faced was that on routes other then /map I got console log errors. This is because the prop binding is done on all pages and not only on MapPage.

When I do prop binding on a div inside my MapPage.vue I get console warnings about rendering order.

So in one way I'm thinking that working with the Qdrawer events that are build in makes more sense then prop bindings. But if prop binding is the right way to do this, I somehow need to bind it inside parent on a Map only component.

<NuxtPage /> seems to be too generic for this.
Maybe I can do prop binding on router level?

As you say events emit to parents and props are used to send data to children. However in this case it's not really data that you load from e.g. an API and want to display or act on in a child component.

I would simply add an event bus like Mitt (https://github.com/developit/mitt) and then register a listener in your map component and trigger them from your menu. However if your menu already emits events that you can use in your map i would simply use that.

For simply passing data you should not make that a habit but in this case that seems reasonable.

Also you're right about not passing props to <NuxtPage />. I would avoid that, impressed that it even works

Hope it helps

It sounds like you have two unrelated components, and sometimes one of them needs to react to the other being clicked on.

Possibilities include:

1. A higher level component listens for events and provides something the map component can inject or bind and react to. This is inelegant because the high level component is polluted with knowledge of deeply nested specialisations
2. Some out-of-band global singleton can be pubbed and subbed to. @ChristofferOne suggests a message bus for this purpose.
3. State modification can also be achieved with a Pinia store (another singleton) representing map location state and a getter that the map component watches or binds. It is possible the map component is already using some kind of store that the menu can address directly. The store would be active even in when the map component was not active, so there would always be somewhere to write new locations to, and an event listener above your menu component could do that.
4. As you allude, your menu events can trigger a navigation that includes bringing up the map component and binds the location to it. Your description suggests you don't want that to happen all the time, tricky.

Which option is best for you depends a bit on what is already in your dependencies. For this reason I would be cautious about an event bus (or Pinia for that matter) for one single component's purpose. The right choice also depends on what other interactions you might plan on.

The event bus approach could be right if nobody ever needs to know what the map is focused on, the store might be better if you want to interrogate the map for where it's at or have the map "magically" be focused on the last location selected even when it wasn't visible.

To achieve communication between your parent layout (layouts/default.vue) and the MapPage.vue component, you can use a combination of props and custom events. Prop binding is a good approach for passing data from parent to child components, and custom events are suitable for child to parent communication.

Here's a suggested approach:

Use Props: In your MapPage.vue component, define props to receive the necessary data from the parent layout. These props will be used to update the map's state.

MapPage.vue:

<template>
  <div>
    <!-- Your Leaflet map code goes here, using the "myDrawer" prop -->
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const { myDrawer } = defineProps(['myDrawer']);
</script>

Emit Custom Event: In your parent layout (layouts/default.vue), listen to the Qdrawer events and emit a custom event when an item is clicked. The custom event will carry the necessary data (e.g., the specific location).

layouts/default.vue:

<template>
  <div>
    <Qdrawer @itemClicked="handleItemClicked" />
    <NuxtPage />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const qdrawerState = ref({});

function handleItemClicked(location) {
  // Emit custom event with the location data
  emit('mapLocationChanged', location);
}
</script>

Listen to Custom Event: Back in your MapPage.vue component, listen for the custom event emitted by the parent layout. When the event is received, update the map's location accordingly.

MapPage.vue:

<template>
  <div>
    <!-- Your Leaflet map code goes here, using the "myDrawer" prop -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onUpdated, defineProps } from 'vue';

const { myDrawer } = defineProps(['myDrawer']);

onMounted(() => {
  // Listen to the custom event from the parent layout
  const handleMapLocationChanged = (location) => {
    // Update the map's location using the received data (location)
  };

  // Register the event listener
  window.addEventListener('mapLocationChanged', handleMapLocationChanged);

  // Clean up the event listener when the component is unmounted
  onUnmounted(() => {
    window.removeEventListener('mapLocationChanged', handleMapLocationChanged);
  });
});
</script>

This way, the communication is done using custom events, and you won't face issues with prop binding on pages where the prop is not required. The custom event will only be triggered when the Qdrawer item is clicked, and the MapPage component will respond to the event accordingly.