vue/define-props-destructuring

enforce consistent style for props destructuring

📖 Rule Details

This rule enforces a consistent style for handling Vue 3 Composition API props, allowing you to choose between requiring destructuring or prohibiting it.

By default, the rule requires you to use destructuring syntax when using defineProps instead of storing props in a variable and warns against combining withDefaults with destructuring.

Now loading...

The rule applies to both JavaScript and TypeScript props:

Now loading...

🔧 Options

{
  "vue/define-props-destructuring": ["error", {
    "destructure": "always" | "never"
  }]
}

• destructure - Sets the destructuring preference for props
  • "always" (default) - Requires destructuring when using defineProps and warns against using withDefaults with destructuring
  • "never" - Requires using a variable to store props and prohibits destructuring

"destructure": "never"

Now loading...

📚 Further Reading

• Reactive Props Destructure

🚀 Version

This rule was introduced in eslint-plugin-vue v10.1.0

🔍 Implementation

• Rule source
• Test source