Vue Tip: Detailed Prop Definitions

Your Vue prop definitions should always be as detailed as possible, specifying at least type(s):

1<script>
2props: {
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>
2props: {
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.