Reputation: 3499

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

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

Upvotes: 36

Answers (18)

sandeepvarma

Reputation: 9

Just try to wrap in <div> tag, It worked for me.

Upvotes: -1

Usman

Reputation: 14

For anyone coming at later time who wants to actually fix the issue rather than disabling this features.

It simply means you have more than one element in your <template> in any of your .vue files.

For example you have this:

<template>
  <div class="first">
      SOMETHING HERE
  </div>
  <div class="second">
      SOMETHING HERE AS WELL
  </div>
</template>

Notice that there are two elements in in <template>, so to fix this issue you can simply add everything in a parent <div>. Because there should only be one element in <template>.

For above Example do this:

<template>
    <div class="container">
        <div class="first">
            SOMETHING HERE
        </div>
        <div class="second">
            SOMETHING HERE AS WELL
        </div>
    </div>
</template>

This would fix the issue.

Upvotes: -2

Ngô Quang Trung

Reputation: 11

i have this problem when i first install vue 3

the problem comes from vetur extension

here is the solution

enter image description here

Upvotes: 1

Mahmoud

Reputation: 2792

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.

Upvotes: 16

Илья Клюковский

Reputation: 1

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

Upvotes: 0

Anatoly Ktitarov

Reputation: 31

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

Upvotes: 0

Ajay Singh Bhadauriya

Reputation: 1

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.

Upvotes: -2

maledr53

Reputation: 1369

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.

Upvotes: 1

mikseros

Reputation: 9

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

Upvotes: 0

2bytebrain

Reputation: 21

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.

Upvotes: 0

LizhangX

Reputation: 21

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": {}
  },

Upvotes: 2

skalta

Reputation: 1422

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.

Upvotes: 50

Dimitri Mostrey

Reputation: 2355

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.

Upvotes: 8

Everton Nogueira

Reputation: 301

Here worked with this:

in .eslintrc.js

instead of:

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

try:

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

Upvotes: 20

Robert

Reputation: 2753

in .eslintrc.js

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

Upvotes: 3

Tianzhou

Reputation: 1008

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

Upvotes: 20

littleBird

Reputation: 1

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

Upvotes: -4

anonymous-dev

Reputation: 3499

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,

Upvotes: 72

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

Answers (18)

Related Questions