define-props-destructuring.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/define-props-destructuring	enforce consistent style for props destructuring

vue/define-props-destructuring

enforce consistent style for props destructuring

• ❗ This rule has not been released yet.

📖 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.

<script setup>
  // ✓ GOOD
  const { foo } = defineProps(['foo'])
  const { bar = 'default' } = defineProps(['bar'])

  // ✗ BAD
  const props = defineProps(['foo'])
  const propsWithDefaults = withDefaults(defineProps(['foo']), { foo: 'default' })

  // ✗ BAD
  const { baz } = withDefaults(defineProps(['baz']), { baz: 'default' })
</script>

The rule applies to both JavaScript and TypeScript props:

<script setup lang="ts">
  // ✓ GOOD
  const { foo } = defineProps<{ foo?: string }>()
  const { bar = 'default' } = defineProps<{ bar?: string }>()

  // ✗ BAD
  const props = defineProps<{ foo?: string }>()
  const propsWithDefaults = withDefaults(defineProps<{ foo?: string }>(), { foo: 'default' })
</script>

🔧 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"

<script setup>
  // ✓ GOOD
  const props = defineProps(['foo'])
  const propsWithDefaults = withDefaults(defineProps(['foo']), { foo: 'default' })

  // ✗ BAD
  const { foo } = defineProps(['foo'])
</script>

📚 Further Reading

• Reactive Props Destructure

🔍 Implementation

• Rule source
• Test source