Eslint-plugin-vue: 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 [email protected].

[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 [email protected].

[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

[marcoValkyriweb]

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
└─ [email protected]
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.

[michael-ottink]

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

[michael-ottink]

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.

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

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