Multiple root slots in a component?

[tiny ivy]

Can I use multiple named slots as the root of a component or do they need a single root element like a <div>?

[twilit plinth]

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

---

In Nuxt (and Vue), components—including pages and layouts—must have a single root element in their template. This is especially important for pages and layouts, as Nuxt relies on a single root element to handle route and layout transitions correctly. HTML comments are also considered elements, so they count towards this rule.

You cannot use multiple named slots (or any slots) as the root of a component. Instead, you should wrap your slots inside a single root element, such as a <div>, <section>, or another appropriate container.

Example of a valid layout with a single root element:

<template>
  <div>
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>

Invalid:

<template>
  <slot name="header" />
  <slot />
  <slot name="footer" />
</template>

This would not work, as it has multiple root elements (the slots themselves).

This rule is documented for both pages and layouts in Nuxt 3 and 4:

• "Pages must have a single root element to allow route transitions between pages. HTML comments are considered elements as well."
• "Unlike other components, your layouts must have a single root element to allow Nuxt to apply transitions between layout changes - and this root element cannot be a <slot />."
  Nuxt 4 pages, Nuxt 4 layouts, Nuxt 3 pages, Nuxt 3 layouts

Summary:
You must use a single root element in your component templates. Multiple named slots cannot be used as root elements; wrap them in a single container instead.

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