Throws error about multiple root elements in template. (Vue 3 + TypeScript)

[dannysmc95]

• [ x ] I have searched through existing issues
• [ x ] I have read through docs
• [ x ] I have read FAQ

Info

• Platform: Ubuntu 20.04 (WSL2 and Ubuntu 20.04)
• Vetur version: 0.27.3
• VS Code version: 1.49.1

Problem

When adding multiple root template elements within a SFC (.vue file), Vetur throws an error, even though Vue 3 now supports it, see screenshot below:

Reproducible Case

NOTE: Repo is used for another issue in this project as well.

1. Clone the repo: https://github.com/dannysmc95/vetur-issue1,
2. Install dependencies, using npm install,
3. Navigate to the ./src/App.vue file in VSCode and see the issue,

[octref]

I cannot reproduce from https://github.com/dannysmc95/vetur-issue1
Vetur uses package.json's vue dependency version to figure out if you are using Vue 3. If your package.json is not at root folder (maybe it's in budee-ui) this will fail back to Vue 2.

If you don't want this you can turn off the default linting and configure your own: https://vuejs.github.io/vetur/linting-error.html

[dannysmc95]

Sure, I have checked the issue, it seems to occur when multiple folders are included in the same workspace...?

[octref]

There's no multiroot support yet: #424

[duck-dev-go]

I am experiencing the same problem when having multiple folders in a workspace within VS Code

[duck-dev-go]

Turning off Vetur linting resolved the problem in my case

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

[yoyo930021]

If you have this problem, your package json isn't in opened project root.
Causes vetur to infer the vue version incorrectly.

1. If you have eslint in project, you can disable template validation temporarily.
2. Move package.json in opened project root,
   This is the best solution, because vue version also use other feature.
   If you can't move this file, you can wait for Vetur config file RFC #2378 .

[mikerockett]

If you have a simple client+server workspace, where client is your Vue app, make sure it's the first project in the workspace. Vetur seems to pick it up. Naturally, any other Vue projects in the same workspace won't be picked up yet.

[xgqfrms]

solutions

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