Nuxt•3mo ago

Using a slot on a "global" component

I have a component (<page-header>) that displays a Page title and subtitle on all pages of my application. This component is placed in one of the Layout components of my application so that it is alway visible. In order to keep the title and subtitle updated I have a composable that updates and stores the values. This works fine for the main content of the component, however on some pages the component also needs to display some extra content, which I was intending to use it's <slot /> to access. Is there a way to access the slot when I am not directly using the <page-header> component?

<script setup lang="ts">
const { title, subtitle } = usePageHeader()
</script>

<template>
  <div class="flex flex-auto top-0 m-4">
    <div class="flex-3">
      <div class="uppercase text-4xl">{{ title }}</div>
      <div class="text-2xl font-light">{{ subtitle }}</div>
    </div>
    <div class="justify-self-end">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
const { title, subtitle } = usePageHeader()
</script>

<template>
  <div class="flex flex-auto top-0 m-4">
    <div class="flex-3">
      <div class="uppercase text-4xl">{{ title }}</div>
      <div class="text-2xl font-light">{{ subtitle }}</div>
    </div>
    <div class="justify-self-end">
      <slot />
    </div>
  </div>
</template>

3 Replies

kapa.ai•3mo ago

Hi @dankell.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, when a component like <page-header> is used inside a layout, and you want to provide slot content from a page, you run into a limitation: slot content can only be passed when you directly use the component in your template. If the component is rendered by a layout, the page itself cannot inject slot content into it, because the page is rendered inside the layout's <slot />, not the other way around. In other words:
You cannot pass slot content to a component that is instantiated in a parent layout from a child page. Slots only work from parent to child, not from child to parent. Workarounds 1. Props or Composables:
Continue using your composable or props to pass all the data you need to the component. For extra content, you could pass a render function, a component name, or structured data, but not actual slot content. 2. Move <page-header> to the Page:
If you need to use slots, consider moving the <page-header> component into each page where you need custom slot content. This way, you can use the slot as intended. 3. Named Slots in Layout:
If you want to keep the header in the layout but allow pages to inject content, you can expose a named slot in your layout and render the extra content there. For example: layouts/default.vue

<template>
  <div>
    <page-header :title="title" :subtitle="subtitle" />
    <slot name="header-extra" />
    <slot />
  </div>
</template>

<template>
  <div>
    <page-header :title="title" :subtitle="subtitle" />
    <slot name="header-extra" />
    <slot />
  </div>
</template>

pages/some-page.vue

<template>
  <template #header-extra>
    <!-- Extra content for this page -->
    <MyExtraComponent />
  </template>
  <!-- Page content -->
</template>

<template>
  <template #header-extra>
    <!-- Extra content for this page -->
    <MyExtraComponent />
  </template>
  <!-- Page content -->
</template>

This way, the page can provide content for a specific slot in the layout, which appears near your header. --- Summary:
You cannot inject slot content into a component that is only used in a layout from a page. Use props/composables for data, or expose a slot in the layout itself for page-specific content. This is a limitation of how Vue and Nuxt handle slots and component hierarchies, and is not specific to your implementation. For more on layouts and slots in Nuxt, see the Nuxt Layouts documentation and Vue slot documentation for how slot content is passed and rendered. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@602890303753682944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dankell.OP•3mo ago

OK. Looks like the solution for me is define named slots and activate them depending on data passed via the composable.

Gaming

Programming

Using a slot on a "global" component

Did you find this page helpful?