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

问题

After scafolding a Vue 3 project I noticed a 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
    }
};

回答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,

回答2:

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

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

标签

typescript

vuejs3