Template root requires exactly one element

[rajinder-yadav]

What rule do you want to change?

In release 3, the following code produces a linting error but should not.

<template>
  <HelloWorld :msg="message" />
  <div class="basket">
    <ul>
      <li v-for="(item, i) of basket" :key="i">{{ item }}</li>
    </ul>
  </div>
</template>

template now acts as the root element and using div is no longer required.

[ota-meshi]

Please use eslint-plugin-vue@7.0.0-beta.3.

[uniquejava]

why latest vue cli not work, it includes "eslint-plugin-vue": "^7.0.0-0", by default, but I still have this error.

@vue/cli 4.5.7

  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "typescript": "~3.9.3"
  }
}

[uniquejava]

I found the reason about it.

I have several small projects under one directory sayparent

so I have parent/project1, parent/project2

If I open parent directory in vs code, my project2 will complain about the above eslint error. but if I open project2 directly, the above eslint error disappeared.

I guess we cannot nest our projects in vs code

otherwise this plugin will not work.

[shocolate15]

Still getting template root requires exactly one element with eslint-plugin-vue@7.0.0-beta.3.

[plainlystated]

Getting this same error on a vue 3.0.2 project, using eslint-plugin-vue@^7.1.0

[CaptainFreak]

Exactly!! Same here @ota-meshi Please help

[MarcoVdE]

Getting:

ESLint: The template root requires exactly one element.(vue/no-multiple-template-root)

Version check:

yarn list --pattern="eslint-plugin-vue"
yarn list v1.22.5
└─ eslint-plugin-vue@7.1.0
Done in 0.54s.

Issue still exists it seems. I am busy checking if it's maybe the airbnb config:

"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.13.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",

Temporary work-around for now is changing your .eslintrc.json file to:

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
      }
    }
  },
  "rules": {
    "vue/no-multiple-template-root": 0
  }
}

The rules piece.

[duck-dev-go]

Getting the same error adding "vue/no-multiple-template-root": 0 did not help

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
    }
};

[duck-dev-go]

In my case the problem was that I was working in a VS Code workspace. Because of the workspace Vetur thinks that it is a Vue 2 project.

vuejs/vetur#2299 (comment)

I just disabeled the Vetur linting in the VS Code settings and the error is no longer there

https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue

[Helongzhou]

vscode-> plugins-> close Vetur and restart vscode, and open Vetur again. P.S. make sure your vscode plugin Vetur version is lastest.

[jorgegarba]

Still getting template root requires exactly one element with eslint-plugin-vue@7.0.0-beta.3.

As @uniquejava said, you have to open Visual Studio Code with that directory only, if you are workin with another folders in the same workspace, the error occurs although you have configured your eslintrc very well.
Sorry for my poor English

[Syverpet]

A quick fix for me was to just go to Extensions in VS Code -> Vetur settings -> and uncheck the "Vetur>Validation:Template" option .

[DevArpan7]

Thanks @uniquejava, It works!

[Inchill]

I met the same issue when using vue@3. Did someone have solved it? Do not tell me to uncheck the vetur settings.

[TheGlorySaint]

I created a new Vue3 project, installed vetur for vscode and get the same issue. Added "vue/no-multiple-template-root": 0 and "vue/no-multiple-template-root": "off" didn't helped me.

[YakovlevGit]

@Syverpet Thank you very much! I took a long time to find your answer. Thank you!

[Marshall-Pierre]

@Syverpet j'ai essayé ta solution mais rien a faire pour moi je suis tjrs bloqué avec le même problème quelqu'un peut m'aider svp

[mittalyashu]

I have migrated a big production-ready website from Vue 2 to Vue 3 and, I am also getting this error from eslint.

template root disallows 'v-for' directives vue/no-multiple-template-root

[FloEdelmann]

For Vue 3, please disable the vue/no-multiple-template-root, or switch from the plugin:vue/recommended preset config to the plugin:vue/vue3-recommended preset, see https://eslint.vuejs.org/user-guide/#bundle-configurations.

FYI: For Vue 3, the recommended VS Code extension changed from Vetur to Volar, see https://v3-migration.vuejs.org/recommendations.html#ide-support.

I'm now going to lock the discussion to prevent further comments. Please open new issues using the issue template and link to this issue if there are more questions.