Enhance Vue Component IDE Tooltips on Hover via JSDoc/TSDoc Comment Annotation

[nathanchase]

What problem does this feature solve?

Current Behavior

When I hover over an instance of a component - either defined in the <script> or the <template>, the tooltip only shows basic component information without any custom documentation:

Expected Behavior

The tooltip should be able to display rich component documentation including:

• Component description
• Available props
• Emitted events
• Usage examples
• Related components

Attempted Solution

I've tried implementing JSDoc/TSDoc-style documentation::

/**
 * @component Toasts
 * @description A component that renders a list of toast notifications using individual Toast components.
 * @example
 * <template>
 *   <Toasts />
 * </template>
 *
 * @props {none}
 * @emits {none}
 * @see Toast
 */

However, this documentation is not recognized by VSCode when hovering over the component.

Additional Context

• This occurs even with explicit component imports (not just auto-imports)
• Using <script setup lang="ts"> syntax
• VSCode (with vue.volar v2.1.6)
• Nuxt 3.x / Vue 3.x

Questions

1. Is this feature possible to implement?
2. Are there any technical limitations preventing this functionality?
3. If possible, what would be the recommended approach for implementation?

Environment

• Nuxt Version: 3.13.2
• VSCode Version: 1.94.2
• Volar Extension Version: 2.1.6
• TypeScript Version: 5.6.3

What does the proposed solution look like?

Expose the line comment annotations from within a given Vue component to the IDE.

[odiak]

I've really wanted this.

I guess language-core package should be modified.
The language-core package have code to generate TypeScript code of component to do type-check.
Adding doc-comment to generated TS code will solve this.

[KazariEX]

https://vue-macros.dev/volar/setup-jsdoc.html

[odiak]

Thanks! I didn't know that. 🙏