Vue Tip: Detailed Prop Definitions

Michael Hoffmann
Nov 12, 2021
| 1 min read
| 118 views
Michael Hoffmann
Nov 12, 2021
1 min read
| 118 views
Script

Your Vue prop definitions should always be as detailed as possible, specifying at least type(s):
Good
<script>props: { status: { type: String, required: true, validator: value => { return [ 'syncing', 'synced', 'version-conflict', 'error' ].includes(value) } }}</script>
Bad
<script>props: { status: String}</script>
This has two advantages:
- API documentation: It's easy to see how the component will be used.
- Development Warnings: In development mode, you will get warnings if you pass incorrectly formatted props to a component.
If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.
Show comments