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

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

https://github.com/vuejs/vetur/issues/2299#issuecomment-696015374

You can solve this by doing

F1>Preferences:Open Settings (JSON)

paste

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

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.

Here worked with this:

in .eslintrc.js

instead of:

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

try:

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

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

https://vuejs.github.io/vetur/guide/setup.html#advanced

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.

With vue create project on Vue3, add this to your package.json file:

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/no-multiple-template-root": "off"
    }
  }

Adding the "rules" eliminates the error as described in the question. No need to change the default vetur settings.

in .eslintrc.js

rules: { "vue/valid-template-root": "off" }

Penny Liu and skalta has the real answer for Vue 3 projects created by the Vue-cli. Problem is the package.json has to be in the immediate path, not in the child folders.

As the package.json specified the Vue3 extends below, vscode/vetur will read the configs and the error will go away. Adding "vue/no-multiple-template-root": "off" won't help as the package.json is not even read by the linter.

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

In the case of working in Vue2, it can be fixed as @mikseros suggested mentioned, by wrapping my html code in only one <div>.

This will trigger the warning:

 <template>
   <div class="first child"> </div>
   <div class="second child"> </div>
 </template>

This will fix it:

 <template>
   <div>
      <div class="first child"> </div>
      <div class="second child"> </div>
   </div>
 </template>

This is also very common in JSX when working in React.

I also have the same problem, because the vetur extension. Fixed it by turning it off for my template linting only in settings.json.

"vetur.validation.template": false

If you want to turn off in your specific workspace you could create a .vscode folder in your root folder, and create a new file settings.json inside the .vscode then paste the code above to your settings.json

and reload your vscode by typing ctrl+shift+p and then typing Reload Window and enter, the error should be gone.

I think, the best solution for that is to wrap all elements in the template into one div element. It works perfectly for me.

I had the same problem when I've scaffolded vue3 app in subdirectory within my project's workspace. If you don't have any package.json in your project's root directory, vetur can't understand which version of vue.js you're using and assumes it is less then 2.5. If the version is wrong, you will get wrong template validation.

So, to overcome this problem you'll need to create a vetur.config.js in the root of your workspace, and provide information about where to find your vue3 app. The following is an example of my setup:

module.exports = {
  projects: [
    './website',
  ],
}

You can learn more in vetur docs:
https://vuejs.github.io/vetur/reference/#example
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-can-t-find-tsconfig-json-jsconfig-json-in-xxxx-xxxxxx

The solution worked for me to disable the setting in vetur !(settings - extentions - vetur)

The main reason behind getting this error is that your project is inside of a folder.

Just remove it from the folder. Your project must be inside of one folder only.

Check

 vscode-> plugins-> close Vetur 

and restart vscode, then open Vetur.

For more informations, check linke below: https://github.com/vuejs/eslint-plugin-vue/issues/1297#issuecomment-755202013