'documentation for vue3 sfc component?

// ...
<script lang="ts" setup>
const p = withDefaults(defineProps<{
  item: NursingProduct
  showPrice?: boolean
  /**
   some comments
  */
  leftWidth?: string
  imgSize?: string
  gutter?: [number, number]
}>(), {
  leftWidth: '45px',
  imgSize: '45px',
  gutter: () => [8, 8]
})
// ...
</script>

How to write documentation for the component and it's properties? I write some comments like above cannot see it when using the component

vue.js


Solution 1:[1]

What you're talking about is provided by TypeScript language server, it should work for Vue 3 TS components same as it works for React components or whatever.

In your example if you start typing p. it should autocomplete with items defined within defineProps, and you should see type of each prop. If that does not work we will need more info to narrow down the issue. What editor are you using, how did you configure TS in your project, are you using vite or vue-cli etc.

  /**
   some comments
  */

this part here does nothing in that place, maybe you're confusing https://jsdoc.app/ with TS. If you're using TS there is no real need for JSDOC since stuff that would normally be documented in JSDOC blocks is documented through proper use of types in TS.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 quadmachine

Related Questions