Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Document Your Component Props Using JSDoc

Vue Tip: Document Your Component Props Using JSDoc Image
Script

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:

MyComponent.vue
<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:

MyComponent.vue
<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:

Screenshot of the prop documentation in VS Code

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Composable to Define Keyboard Shortcuts

I show you a handy Vue composable that allows you to define keyboard shortcuts in your app.

Vue Tip: Best Way to Force Re-Render Vue Component

In certain scenarios, Vue's reactivity approach isn’t sufficient, and we need to force re-rendering of specific components.