Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Detailed Prop Definitions

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Nov 12, 2021
1 min read
|
118 views
Script
Vue Tip: 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. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.