Vue 3 The template root requires exactly one element. eslint-plugin-vue

Solution 1

I ended up turning off Vetur linting. Vetur thinks that it is a Vue 2 project becuase it is in a VS Code workspace.

You can solve this by doing

F1>Preferences:Open Settings (JSON)

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

Solution 2

The error occurred with me, because I had not opened the project root in VS Code, but the parent folder, and Vetur thus looked in this for the package.json.

Solution 3

Here worked with this:

rules: { "vue/no-multiple-template-root": 0 }

rules: {"vue/no-multiple-template-root": "off" }

Solution 4

If you are working on a monorepo and thus the package.json is not at the workspace root, then Vetur by default won’t able to find package.json, thus it couldn’t figure out the vue version.

In that case, we need to tell Vetur the package.json location

Solution 5

Disable Vetur and use Volar instead. It’s now the official recommendation for Vue 3 projects.

From the official migration guide:

It is recommended to use VSCode with our official extension Volar (opens new window), which provides comprehensive IDE support for Vue 3.

Comments

Solution 1

We can only have one root element in the template. So, if you want to use as a sibling of div with class wrapper, you need to wrap both of these to a parent div, as below:

<template>
  <div>
    <post-form/>
    <div class="wrapper">
        <b-table :data="posts">
            <template slot-scope="props">
                <b-table-column field="completed" label="complete">
                    <b-checkbox 
                      v-model="props.row.done">
                    </b-checkbox>
                </b-table-column>
            </template>
        </b-table>
    </div>
  </div>
</template>

Solution 2

Maybe you are using Vue3, while you eslint config is still vue 2.

Try to edit your .eslintrc.json or something like this:

{
  // ...
  "extends": ["eslint:recommended", "plugin:vue/vue3-essential"],
  // ...
}

Check out reference here: eslint-plugin-vue/#usage

Related videos on Youtube

36 : 23

how to convert html template to vue js 3 template

02 : 05

Component template should contain exactly one root element.

33 : 44

09 : 24

Vue 3 new feature: Fragments (AKA Multiple Root Nodes)

01 : 25

Vue js error Component template should contain exactly one root element — JavaScript

01 : 50

How to fix the error You may need an appropriate loader to handle this file type. (laravel 8 — vue)

Comments

• <template>
  <!--<post-form/>-->
      <div class="wrapper">
          <b-table :data="posts">
              <template slot-scope="props">
                  <b-table-column field="completed" label="complete">
                      <b-checkbox 
                        v-model="props.row.done">
                      </b-checkbox>
                  </b-table-column>
              </template>
          </b-table>
      </div>
  </template>
  

  I have a b-table with buefy. And I want to import the <post-form /> component from the current component.

  However, when I insert the component in the desired location, an error occurs.

  <div class="wrapping"> If I place a component under it, my table is broken.

  How can I solve this?

• Ah! I delete my post-form’s style-scope and it works fine. Why does my style-scope affect parent components?

• This is for someone new to Vue3, Vue3 is now available since 2020

• you are the real mvp

• me too! thanks!!

A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths.

API Reference

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

"vue/no-multiple-template-root": 0

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "vue/no-multiple-template-root": 0
    }
};

F1>Preferences:Open Settings (JSON)

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

Symptoms

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

As explained, VueJS component templates can contain one and only one root node. This is correct:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

This is not:

<template>
  <div class="hola">
    <h1>{{ msg }}</h1>
  </div>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

Fix

Wrap your html tags into one parent element:

<template>
  <div>
    <div class="hola">
      <h1>{{ msg }}</h1>
    </div>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
  </div>
</template>

Going further

In some case, you cannot afford to add an extra parent element without breaking HTML structure. For instance, if your child component template replace several <tr> in a parent HTML table:

<template>
  <tr class="hola">
    ...
  </tr>
  <tr class="hello">
    ...
  </tr>
</template>

In this specific case, you need have two solutions:

• use functional components ;
• use Fragments (my favorite one)

Fragments let you group multiple children below a parent element without adding extra nodes to the DOM at render. There is a vue-fragment package you can install:

npm install vue-fragments // yarn add vue-fragments

While loading VueJS:

import { Plugin } from "vue-fragments"; Vue.use(Plugin);

Then in your component template:

<template>
  <v-fragment>
    <tr class="hola">
      ...
    </tr>
    <tr class="hello">
      ...
    </tr>
  <v-fragment>
</template>

Hope it helps!

The problem is described below:

When the Vue3.0 is created, it is found that the .vue file is written by Vue3.0, but ESLINT will still report an error, prompt:

the template root requires exactly one element

Vue3.0 previous version only on the Template tab is only allowed to have a label

<template>
  <div>code</div>
</template>

<script>
export default { 
  // code 
}
</script>

So there is a rule in the ESLINT plug-in Vue / Recommended is Vue / no-multiple-template-root, used to prompt developers, pay attention to specification

But from Vue3.0, support multiple tags in Template,

And if we use the plugin, if there is no change, it will have a copy of the information from other Vue2.0 projects. There will be this problem at this time.

Solution is simple:

Plugin: Vue / Recommended is changed to Plugin: Vue / Vue3-Recommended

module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
  }

This will not report an error, the reason is very simple, we used 3.0 previous version of Rules to change to 3.0.