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):
```vue
<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:
Metronic Latest basing it off Demo1 for VueJS
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:
Hi,
Could you please specify which product are you using?
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>
