Vue Tip: Detailed Prop Definitions
Michael Hoffmann
Nov 12, 2021
| 1 min read
| 103 views
Michael Hoffmann
Nov 12, 2021
1 min read
| 103 views
Script
Your Vue prop definitions should always be as detailed as possible, specifying at least type(s):
1
<script>
2
props: {
3
status: {
4
type: String,
5
required: true,
6
validator: value => { return [ 'syncing', 'synced', 'version-conflict', 'error' ].includes(value) }
7
}
8
}
9
</script>
1
<script>
2
props: {
3
status: String
4
}
5
</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:
New Vue & Nuxt tips delivered to your inbox: