How to properly document a script setup component with JsDoc?

[rodrigocfd]

In React, since components are explicitly written as functions, documentation with JSDoc is trivial:

/**
 * This component does something.
 */
function MyComponent() {
    return <div>Hello</div>;
}

How are we supposed to apply JSDoc to Vue 3 components written with the script setup syntax?

[gimjin]

enable vue/require-prop-comment

[arildm]

One method described at https://stackoverflow.com/q/72003493/ is to add an extra non-setup script tag with a default export that a doc comment can apply to:

<script lang="ts">
/** This is a nice component */
export default {};
</script>

<script setup lang="ts">
// Rest of the code here...
</script>

This seems to be parsed properly at least in VSCode, but I don't know about other JSDoc tools.

[rodrigocfd]

Yes, I'm aware of that. But it's such an ugly hack for something simple as a documentation. It's discouraging.