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

Question

After scaffolding a Vue 3 project I noticed an error in my App.vue.

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

I tried putting

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

in my .eslintrc.js

But the error remains. How can I get rid of the error? Since in Vue 3 you don't have to have exactly one element in a template.

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

Answer 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.

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,

Answer 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.

Answer 3

Here worked with this:

in .eslintrc.js

instead of:

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

try:

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

Answer 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

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

Answer 5

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.

Answer 6

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.