Vue language service is not enabled in new created fullstack project

Problem

If you are creating a new ASP.NET Core fullstack application from scratch, as default application templates do not match your usage, you may encounter this issue.

Considering you create a webapi solution, in the solution folder, then you create a new Vue3 project, which the directory structure looks like below.

$tree -L 2
.
├── FullstackFromDraft
│   ├── FullstackFromDraft.csproj
│   ├── Program.cs
│   ├── bin
│   └── obj
├── FullstackFromDraft.sln
└── sample-vue-client
    ├── README.md
    ├── babel.config.js
    ├── jsconfig.json
    ├── node_modules
    ├── package.json
    ├── public
    ├── src
    ├── vue.config.js
    └── yarn.lock

Then open the .sln file in Rider, when editing .vue files, you cannot get any code completion as the Vue language server is not started automatically.

Cause

By default, Rider will only index folders/files declared in .sln. If the folder is not indexed, Rider will not recognize the project type and enable proper language services for it.

Resolution

In Solution Explorer, select Add | Existing Folder, then select your frontend project folder.

Or in Solution Explorer (File System view), right-click on the frontend project, select Tools | Attach to Solution to index it.

It's the same result if there is no .csproj in the frontend project. Once the folder is attached, you will see the Vue language service status in the status bar.

If you create the frontend project in the same level as the .NET project, since it will be included in the .NET project, Rider will index it automatically.

Ensure you have Vue/Angular plugin enabled in Rider, if the corresponding framework support plugin is disabled, Rider cannot use the corresponding language service as well. (See Missing language services in TypeScript/JavaScript projects under ASP.NET Core solution)