'Problem "vue/no-multiple-template-root" occurs, how do I fix it?

Edit: Somehow doing v-if and v-else statements fixed this. Nonetheless could someone explain how to fix this?

Summary: Error occurs because of 2 Elements present in template. This Vue 3 The template root requires exactly one element.eslint-plugin-vue isn't helping. How do I fix this?

I'm currently following this tutorial (https://www.youtube.com/watch?v=72Fk9i9HcZM&t=830s) to create a Chat with Vue and Firebase. In the tutorial having two div-Elements is working w/o any issues. However, I tried it and it works but it is underlined in red and I ran into some issues later on. This is the Description of said problem:

[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue

I searched for some solutions and found this Vue 3 The template root requires exactly one element.eslint-plugin-vue. I tried the solutions provided but it doesn't solve the Problem.

This is my first time working with vue and eslint and I'm a beginner at programming. Could someone help me please?

vue.jseslint-plugin-vue


Solution 1:[1]

the simplest and most ingenious way is wrap all the code in a single parent div.

`<template>
    <div class="main-div>
      *<!--------all your code should be in here------->*
    </div>
</template>`

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions