Why this matters
Detailed prop definitions document the component's API, making it easy to understand how to use the component. In development, Vue will warn if incorrectly formatted props are provided, helping to catch potential errors.
In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
Detailed prop definitions document the component's API, making it easy to understand how to use the component. In development, Vue will warn if incorrectly formatted props are provided, helping to catch potential errors.
Side-by-side examples engineers can pattern-match during review.
// This is only OK when prototyping
props: ['status']props: {
status: String
}
// Even better!
props: {
status: {
type: String,
required: true,
validator: value => {
return [
'syncing',
'synced',
'version-conflict',
'error'
].includes(value)
}
}
}props: ['status']props: {
status: String
}props: {
status: {
type: String,
required: true,
validator: value => {
return [
'syncing',
'synced',
'version-conflict',
'error'
].includes(value)
}
}
}From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.