useVueDefaultProp (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueDefaultProp
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-default-prop

How to configure

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

Description

Require a default value for optional props in Vue components.

When a parent component doesn’t pass an optional prop, Vue sets it to undefined. Code that uses the prop then has to handle undefined every time, and it’s easy to forget. A default value says what the component should use when the prop is left out.

This rule reports props that are neither required nor given a default value. Props that only accept Boolean are not reported, because Vue already sets them to false when they are left out.

Props declared with a type, as in defineProps<{ size?: number }>(), are only checked when the component gives defaults through withDefaults() or by destructuring the props.

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    size: Number,
5
  },
6
};
7
</script>

code-block.vue:4:5 lint/nursery/useVueDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The optional prop size has no default value.
  
    2 │ export default {
    3 │   props: {
  > 4 │     size: Number,
      │     ^^^^
    5 │   },
    6 │ };
  
  ℹ When a parent component doesn't pass this prop, its value is undefined, which the component has to handle everywhere it uses the prop.
  
  ℹ Give the prop a default value, or mark it as required if parent components must always pass it.
  
  ℹ 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>
2
defineProps({
3
  size: {
4
    type: Number,
5
    required: false,
6
  },
7
});
8
</script>

code-block.vue:3:3 lint/nursery/useVueDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The optional prop size has no default value.
  
    1 │ <script setup>
    2 │ defineProps({
  > 3 │   size: {
      │   ^^^^
    4 │     type: Number,
    5 │     required: false,
  
  ℹ When a parent component doesn't pass this prop, its value is undefined, which the component has to handle everywhere it uses the prop.
  
  ℹ Give the prop a default value, or mark it as required if parent components must always pass it.
  
  ℹ 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<{ size?: number; label?: string }>(), {
3
  label: "Button",
4
});
5
</script>

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

  ⚠ The optional prop size has no default value.
  
    1 │ <script setup lang="ts">
  > 2 │ withDefaults(defineProps<{ size?: number; label?: string }>(), {
      │                            ^^^^
    3 │   label: "Button",
    4 │ });
  
  ℹ When a parent component doesn't pass this prop, its value is undefined, which the component has to handle everywhere it uses the prop.
  
  ℹ Give the prop a default value, or mark it as required if parent components must always pass it.
  
  ℹ 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 { size } = defineProps<{ size?: number }>();
3
</script>

code-block.vue:2:32 lint/nursery/useVueDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The optional prop size has no default value.
  
    1 │ <script setup lang="ts">
  > 2 │ const { size } = defineProps<{ size?: number }>();
      │                                ^^^^
    3 │ </script>
    4 │ 
  
  ℹ When a parent component doesn't pass this prop, its value is undefined, which the component has to handle everywhere it uses the prop.
  
  ℹ Give the prop a default value, or mark it as required if parent components must always pass it.
  
  ℹ 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 { size = 1, label, disabled } = defineProps<{
3
  size?: number;
4
  label: string;
5
  disabled?: boolean;
6
}>();
7
</script>

1
<script>
2
export default {
3
  props: {
4
    size: {
5
      type: Number,
6
      default: 1,
7
    },
8
    label: {
9
      type: String,
10
      required: true,
11
    },
12
    disabled: Boolean,
13
  },
14
};
15
</script>