#Overriding a Layout on a per-page basis not working with slots?

5 messages · Page 1 of 1 (latest)

vapid fulcrumBOT
#

Hi @dawn wedge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your approach to overriding the layout on a per-page basis and using slots is correct according to the Nuxt documentation. Setting definePageMeta({ layout: false }) in your page and then wrapping your content in <NuxtLayout name="default"> with slot templates should work and allow you to provide content for named slots like sidebar in your layout file.

However, if the layout is not being applied at all, there are a few things to check based on the official documentation and known issues:

  1. Ensure <NuxtLayout> is not the root element of your page
    The Nuxt docs recommend that <NuxtLayout> should not be the root element of your page component, as this can interfere with transitions and layout rendering. Try wrapping your <NuxtLayout> in a <div> or another element:

    <template>
  <div>
    <NuxtLayout name="default">
      <template #sidebar>
        <ul>
          <!-- sidebar content -->
        </ul>
      </template>
      <div>
        <!-- content for default slot -->
      </div>
    </NuxtLayout>
  </div>
</template>

    See: Overriding a Layout on a Per-page Basis

  2. Slot Names Must Match
    Double-check that the slot name in your layout (<slot name="sidebar" />) matches exactly with the template slot in your page (<template #sidebar>).

#

  1. No Nested <NuxtLayout> in app.vue
    Your app.vue already wraps everything in a <NuxtLayout>. When you use <NuxtLayout> again in your page, you end up with nested layouts, which can cause unexpected behavior. If you want to override the layout on a per-page basis, consider removing the <NuxtLayout> from app.vue and only use it in your pages, or use a conditional approach in app.vue to avoid double-wrapping.

    The docs and community discussions highlight that using <NuxtLayout> in both app.vue and a page with layout: false can lead to issues, as the layout system expects only one active layout wrapper at a time.
    See: Github Issue - definePageMeta layout:false Confusing actions

  2. Dynamic Layouts and Slots
    The pattern you are using is supported and documented, but if you still encounter issues, try simplifying your setup to isolate the problem (e.g., remove ClientOnly and other wrappers temporarily).

Summary:

  • Avoid having <NuxtLayout> in both app.vue and your page at the same time.
  • Make sure <NuxtLayout> is not the root element of your page.
  • Ensure slot names match.

If after these changes the layout still does not get applied, it may be due to a bug or a specific edge case in your project setup. The official documentation and community issues confirm that your approach should work when these guidelines are followed Nuxt Layouts Guide, NuxtLayout API.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dawn wedge
#

Wrapping the <NuxtLayout> on the page with a div so it's not the root element makes no difference.