VueJS Template : Component template should contain exactly one root element.
I get the following error all over the VueJS demo1
Component template should contain exactly one root element.
Looking at your Vue Templates in crafted pages. Almost all of them have multiple root elements. Why is this?
Any example is crafted/account/Settings.vue. It has 5 root elements inside of the template
<template>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
</template>
Replies (5)
That error means your component’s template currently has more than one top-level element. In Vue 2, every component template must have exactly one root element — fix it by wrapping everything in a single container (for example <div>...</div>). In Vue 3 multiple root nodes are allowed, so check your Vue version or build setup if you still see the error.
For example (Vue 2 safe fix):
<template>
<div> <!-- single root -->
<header>Listing title</header>
<section>Property details</section>
</div>
</template>
Relating it to our roofing business: just like a roof needs a single, sound structure to protect a home, a component needs one clear root to render reliably — especially important for a real-estate display or classifieds site where broken UI can erode user trust. for more info get in touch: https://scottsdale-roofing.com/
In Vue 2, a component could only contain one root element, but in Vue 3, components can contain multiple root elements.
You can check Vue 3 migration guide:
My formatting is messed up. See Below
<template>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
<div class="card mb-5 mb-xl-10">>
</div>
</template>
