vue/define-props-destructuring Style

What it does

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

Why is this bad?

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.

Examples

Examples of incorrect code for this rule:

<script setup lang="ts">
const props = defineProps(["foo"]);
const propsWithDefaults = withDefaults(defineProps(["foo"]), { foo: "default" });
const { baz } = withDefaults(defineProps(["baz"]), { baz: "default" });
const props = defineProps<{ foo?: string }>();
const propsWithDefaults = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
</script>

Examples of correct code for this rule:

<script setup lang="ts">
const { foo } = defineProps(["foo"]);
const { bar = "default" } = defineProps(["bar"]);
const { foo } = defineProps<{ foo?: string }>();
const { bar = "default" } = defineProps<{ bar?: string }>();
</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

Configuration

This rule accepts a configuration object with the following properties:

destructure

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny vue/define-props-destructuring --vue-plugin

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/define-props-destructuring": "error"
  }
}

References

• Rule Source