useVueDefinePropsDestructuring (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueDefinePropsDestructuring
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/define-props-destructuring

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueDefinePropsDestructuring": "error"
6
      }
7
    }
8
  }
9
}

Description

Require destructuring the props returned by Vue’s defineProps macro.

Since Vue 3.5, the variables you destructure from defineProps() stay reactive, so they update when the parent component passes new values. Destructuring lets you read each prop as a plain variable and set its default value with regular JavaScript default value syntax. This rule reports defineProps() calls whose result is assigned to a variable without destructuring it into separate props.

Once props are destructured, withDefaults() is no longer needed to set default values, so this rule also reports withDefaults() calls whose result is destructured or not assigned to a variable.

Calls to defineProps() without arguments are ignored, and so are calls that receive only an empty object, an empty array, or the empty type {}.

Examples

Invalid

1
<script setup>
2
const props = defineProps(["foo"]);
3
</script>

code-block.vue:2:15 lint/nursery/useVueDefinePropsDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The props returned by defineProps() are not destructured.
  
    1 │ <script setup>
  > 2 │ const props = defineProps(["foo"]);
      │               ^^^^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Destructured props stay reactive and can be read as plain variables.
  
  ℹ Destructure the props you need, for example const { foo } = defineProps(...).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup lang="ts">
2
const props = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
3
</script>

code-block.vue:2:28 lint/nursery/useVueDefinePropsDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The props returned by defineProps() are not destructured.
  
    1 │ <script setup lang="ts">
  > 2 │ const props = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
      │                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Destructured props stay reactive and can be read as plain variables.
  
  ℹ Destructure the props you need, for example const { foo } = defineProps(...).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup lang="ts">
2
const { foo } = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
3
</script>

code-block.vue:2:17 lint/nursery/useVueDefinePropsDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Default values for props are set with withDefaults() instead of in the destructuring.
  
    1 │ <script setup lang="ts">
  > 2 │ const { foo } = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
      │                 ^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ With destructuring, each default value sits next to the variable that holds the prop, so withDefaults() isn't needed.
  
  ℹ Remove withDefaults() and give each prop its default value in the destructuring, for example const { foo = "default" } = defineProps(...).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup lang="ts">
2
withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
3
</script>

code-block.vue:2:1 lint/nursery/useVueDefinePropsDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Default values for props are set with withDefaults() instead of in the destructuring.
  
    1 │ <script setup lang="ts">
  > 2 │ withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
      │ ^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ With destructuring, each default value sits next to the variable that holds the prop, so withDefaults() isn't needed.
  
  ℹ Remove withDefaults() and give each prop its default value in the destructuring, for example const { foo = "default" } = defineProps(...).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script setup lang="ts">
2
const { foo } = defineProps<{ foo?: string }>();
3
const { bar = "default" } = defineProps<{ bar?: string }>();
4
defineProps<{ baz?: string }>();
5
const props = defineProps();
6
</script>