Nuxt•2w ago

Multiple slots in a layout?

Is it possible to do multiple slots in a layout? For example, for a page to be able to fill the sidebar's contents. (I don't like teleports because they're not SSR friendly)

4 Replies

kapa.ai•2w ago

Hi @FabiansGeikinsSpeckle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to use multiple slots in a Nuxt layout, including one for sidebar content. This can be achieved without using teleports, making it SSR-friendly. Here's how you can implement this: 1. In your layout file, you can define multiple named slots:

<template>
  <UContainer>
    <UPage>
      <template #left>
        <UAside>
          <slot name="sidebar" />
        </UAside>
      </template>

      <slot />
    </UPage>
  </UContainer>
</template>

<template>
  <UContainer>
    <UPage>
      <template #left>
        <UAside>
          <slot name="sidebar" />
        </UAside>
      </template>

      <slot />
    </UPage>
  </UContainer>
</template>

2. In your page file, you can then use these named slots to provide content for different parts of the layout:

<template>
  <div>
    <template #sidebar>
      <!-- Sidebar content goes here -->
      <UNavigationTree :links="navigationLinks" />
    </template>

    <!-- Main page content goes here -->
    <h1>Page Title</h1>
    <p>Page content...</p>
  </div>
</template>

<template>
  <div>
    <template #sidebar>
      <!-- Sidebar content goes here -->
      <UNavigationTree :links="navigationLinks" />
    </template>

    <!-- Main page content goes here -->
    <h1>Page Title</h1>
    <p>Page content...</p>
  </div>
</template>

This approach allows you to fill the sidebar's contents from the page component, as well as provide the main content for the page. The <slot name="sidebar" /> in the layout allows you to inject sidebar content from the page, while the default <slot /> is used for the main page content. This method is fully SSR-compatible and follows Nuxt 3's layout system. It leverages Vue's slot system to provide a flexible and powerful way to structure your pages and layouts. For more information on using layouts in Nuxt 3, you can refer to the Nuxt 3 Migration Guide for Pages and Layouts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

FabiansGeikinsSpeckleOP•2w ago

i dont think this is true, it doesnt work for me - throws an error when i try to use the slot in a page

FoxForGate•2w ago

The method presented is the conventional one, what is the error that appears when you try to use it?

Gaming

Programming

Multiple slots in a layout?

Did you find this page helpful?