Javascript is required
Mokkapps Logo

Vue Tip: Detailed Prop Definitions

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Nov 12, 2021
1 min read
|
52 views
Script
Detailed Prop Definitions Image

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 content from me. Alternatively (or additionally), you can also subscribe to my newsletter.