#Single root for components in vue3 ?

9 messages · Page 1 of 1 (latest)

stark jay
#

Hello Kapa

I'm never sure if in nuxt 3 / vue 3 it's still important to have a single root in a component
is this ok ?

<template>
  <component
    :is="svgs[piece.name]"
    v-if="props.piece.isCaptured"
    draggable="false"
    :class="computedClass"
    @click="selectPiece" />
</template>
umbral nexusBOT
#

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

#

In Nuxt 3 and Vue 3, having a single root element is required for pages and layouts, but for regular components, it is no longer strictly required to have a single root element. Vue 3 introduced support for fragments, which means components can have multiple root elements.

However, your example is perfectly valid as it has a single root element (<component ... />). If you wanted, you could also have multiple root elements in a component in Vue 3/Nuxt 3, and it would work fine. The single root requirement still applies to pages and layouts for transitions and routing to work correctly in Nuxt 3, but not for regular components Vue with Nuxt pages layouts.

So, your code is fine, and you do not need to wrap it in a <div> or similar unless you want to for styling or structure.

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

#

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

fickle mist
stark jay
stark jay
#

very interesting thanks for pointing out

#

and I can still fix it with $attrs