[V2][Vue-JS-Template] The Template Root Requires Exactly One Element | Vetur Ext Can't Find package.json File

[KiddoV]

Description

This bug occurs on the Vue-JS template. On the Vetur extension for VSCode.
You can still run the app, but the warning (error) is disturbing.
Because Vetur can't find package.json, it doesn't know if Vue version is above 2.5.

To Reproduce

1. wails init -n myproject -t vue
2. Open myproject folder with VSCode
3. wails dev
4. Look at the App.vue file
5. Line 7 <HelloWorld /> throw an error on VSCode

Expected behaviour

No errors on VSCode

Screenshots

Attempted Fixes

I think it is because we open the wails app from the root folder so Vetur can' find our package.json in the frontend folder.
Here are the possible solutions:
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-can-t-find-package-json-in-xxxx-xxxxxx
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-found-xxx-but-they-aren-t-in-the-project-root

Maybe we need to add file vetur.config.js to the root derectory?
Please fix this Vue template, thanks!

System Details

System
------
OS:             Windows 10 Enterprise LTSC 2021
Version:        2009 (Build: 19044)
ID:             21H2
Go Version:     go1.19
Platform:       windows
Architecture:   amd64

Wails
------
Version:        v2.0.0-beta.44.2

Dependency      Package Name    Status          Version
----------      ------------    ------          -------
WebView2        N/A             Installed       104.0.1293.63
npm             N/A             Installed       8.15.0
*upx            N/A             Installed       upx 3.96
*nsis           N/A             Available

Additional context

No response

[leaanthony]

Is this a Wails bug though?

[KiddoV]

@leaanthony Definitely not a wails bug.
Like I said the app still be able to run, I think it just the Vetur extension on VSCode for Vue application that throw this error.

[leaanthony]

I'm not sure we should do anything to be honest. Sounds like something that should be configured in Vetur. Maybe open an issue there?

[lyimmi]

I don't think its a Wails issue, maybe the documentation could have a few lines about it?
I use it as follows:

Create a file named vetur.config.js in the project's root.

// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
    // **optional** default: `{}`
    // override vscode settings
    // Notice: It only affects the settings used by Vetur.
    settings: {
        "vetur.useWorkspaceDependencies": true,
        "vetur.experimental.templateInterpolationService": true
    },
    // **optional** default: `[{ root: './' }]`
    // support monorepos
    projects: [
        {
            // **required**
            // Where is your project?
            // It is relative to `vetur.config.js`.
            // root: './packages/repo1',
            root: './frontend',
            // **optional** default: `'package.json'`
            // Where is `package.json` in the project?
            // We use it to determine the version of vue.
            // It is relative to root property.
            package: './package.json',
            // **optional**
            // Where is TypeScript config file in the project?
            // It is relative to root property.
            tsconfig: './tsconfig.json',
            // **optional** default: `'./.vscode/vetur/snippets'`
            // Where is vetur custom snippets folders?
            snippetFolder: './.vscode/vetur/snippets',
            // **optional** default: `[]`
            // Register globally Vue component glob.
            // If you set it, you can get completion by that components.
            // It is relative to root property.
            // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
            globalComponents: [
                './src/components/**/*.vue'
            ]
        }
    ]
}

Veture usually have some issues with the TS config as well:

Create a file named frontend/tsconfig.js

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outFile": "../../built/local/tsc.js",
    "allowJs": true
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "include": [
    "src/**/*",
    "wailsjs/**/*.ts"
  ]
}

[leaanthony]

@KiddoV The original error is about not having multiple tags at the top level of your component. If you wrap lines 6 and 7 in a div, the error will go away. I've added in @lyimmi's info here: https://wails.io/docs/next/guides/vscode#vetur-configuration

[KiddoV]

Nice! Thanks guys!

[KiddoV]

@lyimmi

Create a file named frontend/tsconfig.js

I believed this file should be frontend/tsconfig.json

[lyimmi]

Yes you are correct, made a PR for it: #1795

[KiddoV]

I got another error from Vetur

Seems like Vetur still isn't support <script setup> tag. 🙄
See issue: vuejs/vetur#2296

Solution? => this

Or just simply get rid of Vetur, I guess! 😃 and use Volar

[StephenBrown2]

Or just simply get rid of Vetur, I guess! 😃 and use Volar

Is this config needed with Volar? Or can I use Volar and it will interpret everything correctly?

[KiddoV]

I am not sure, but if your VScode doesn't yell anything then you are good to go.