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:
vue
<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:
vue
<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
json
{
"vue/define-props-destructuring": ["error", {
"destructure": "always" | "never"
}]
}
destructure
- Sets the destructuring preference for props
"always"
(default) - Requires destructuring when usingdefineProps
and warns against usingwithDefaults
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:
bash
oxlint --deny vue/define-props-destructuring --vue-plugin
json
{
"plugins": ["vue"],
"rules": {
"vue/define-props-destructuring": "error"
}
}