Sometimes, we want to fix the ‘Component template should contain exactly one root element’ error with Vue.js.

In this article, we’ll look at how to fix the ‘Component template should contain exactly one root element’ error with Vue.js.

How to fix the ‘Component template should contain exactly one root element’ error with Vue.js?

To fix the ‘Component template should contain exactly one root element’ error with Vue.js, we should make sure we only have one root element in our component template.

For instance, we write

<template>
  <div>
    <div class="form-group">...</div>

    <div class="col-md-6">...</div>
  </div>
</template>

to wrap the 2 divs with another div to avoid this error.

Vue 3 allows multiple root elements, so we won’t see this error with multiple elements as the child of template.

Conclusion

To fix the ‘Component template should contain exactly one root element’ error with Vue.js, we should make sure we only have one root element in our component template.