vue/detailed-props

Why

defineProps(['status', 'items']) accepts anything: a string where an array was expected reaches the template and fails there, far from the caller. The component's contract is not written anywhere, and editors cannot help the next person who uses it.

Fix

Use the type-based declaration in TypeScript (defineProps<{ status: 'open' | 'closed'; items: Item[] }>()) or the object form with type, required and, where useful, validator. Give optional props defaults with withDefaults or destructuring defaults (Vue 3.5).

Examples

// bad
const props = defineProps(['status'])
// good
const props = defineProps({ status: { type: String, required: true, validator: (v) => ['open', 'closed'].includes(v) } })

Sources

• Vue Style Guide, Priority A (use detailed prop definitions)
• Vue docs, Props (prop validation)

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/detailed-props