How to use JSDoc to document a Vue component with script setup?

Issue

I’m building a Vue library with TypeScript. I’d like to export the documentation of the components, like I do with ordinary functions.

Previously we would do this:

<script>
/**
 * This is the documentation of my component.
 */
export default {
}
</script>

<template></template>

But now with script setup:

<script setup lang="ts">
</script>

<template></template>

How do we document the component?

Solution

With <script setup> you can’t use JSDoc on the component export.

It’s a compiler syntaxic sugar that gets out the export of the setup function, so you obviously can’t comment a function that is "generated" by the compiler.

If you really needs JSDoc, you should use a regular <script> with export default defineComponent 🙂

<script>
import { defineComponent } from 'vue'

/** This is my nice component documentation */
export default defineComponent({
  name: 'MyComponent',
})
</script>

Also works with the classical object definition:

<script>
import { defineComponent } from 'vue'

/** This is my nice component documentation */
export default {
  name: 'MyComponent',
}
</script>

EDIT: as mentionned by @EstusFlask in the comments, you can mix both <script setup> and <script> on a SFC component (see docs)
So you can use the regular script to expose your JSDoc.

<script setup>
// component setup. Takes priority over the eventual `setup()` function of the export object in <script>.
</script>

<script>
/** This is my nice component documentation */
export default {
  name: 'MyComponent',
}
</script>

Answered By – Kapcash

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published