How to comment VueJs Single-File-Components

Question

I am writing a VueJs app, using typescript, and have mostly switched to Vue's new script setup syntax for my single file compontents (SFC). I don't know how to write comments that properly show up in VSCode's intellisense.

I want to comment my SFC components, including an "overall" comment for the component itself.

Formerly, without the setup syntax, I did:

<script lang="ts">

/** Displays a track's artist info.....
 * @remarks This component ....
 */
export default defineComponent({
    name: 'ArtistInfo',

This worked not very well either, but the text actually showed up in the VSCode intellisense preview inside the component itself, when hovering over the default keyword:

It did not work from the outside, in code using the SFC component. In any case, using the setup syntax or not, it just gives a generic usage hint:

Now with the new script setup syntax there is no obvious place to put the comment in the first place.

Question: Where should I put component level comments for my SFC with the script setup syntax? And: What is needed to let VSCode's intellisense show it at usage time?

NOTE

• I have installed the Volar extension as recommended here: https://stackoverflow.com/a/76441150/79485 but it's not working either (only for properties etc,.. not the componenent itself)

Answer 1

I'm writing down how I comment in code which perfectly work for in VS code.

1. Component Level Comment

2. Functional Comment

3. Props Comment

For any query, feel free to comment. :)