Nuxt•5mo ago

Single root for components in vue3 ?

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>

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

6 Replies

kapa.ai•5mo ago

Hi @Omnislash. 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: ----------------------

kapa.ai•5mo ago

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

Cake•5mo ago

you can have non-single root components, but it will ~~error~~ warn if you're using fallthrough attributes

OmnislashOP•5mo ago

so @click is supposed to warn or not work properly or something ? because so far it looks ok, I don't find much info about multiple root node in vue 3 VS vue 2

OmnislashOP•5mo ago

how you mean this specifically https://vuejs.org/guide/components/attrs#attribute-inheritance-on-multiple-root-nodes

Vue.js

Vue.js - The Progressive JavaScript Framework

OmnislashOP•5mo ago

very interesting thanks for pointing out and I can still fix it with $attrs that's so nice

Gaming

Programming

Single root for components in vue3 ?

Did you find this page helpful?