Vue Tip: Document Your Component Props Using JSDoc

It can be useful to document your component props so that they show up when you hover over the component in your IDE. You can do this using JSDoc in the TypeScript interface that you pass to the defineProps function:

<script setup lang="ts">
export interface Props {
  /** The name of the user. */
  name: string
  /** The age of the user. */
  age: number
}
defineProps<Props>()
</script>

It's also possible to document the props in the defineProps function:

<script setup lang="ts">
defineProps<{
  /** The name of the user. */
  name: string
  /** The age of the user. */
  age: number
}>()
</script>

If you hover over the prop name in your IDE, you should see the documentation: