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 (4)
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>
Hi,
Could you please specify which product are you using?
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:
https://v3-migration.vuejs.org/breaking-changes/functional-components.html#functional-components
