useVueValidDefaultProp (JavaScript)

Language JavaScript (and super languages)

Summary

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

How to configure

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

Description

Require the default value of a Vue prop to match the type of the prop.

When a prop declares its type, such as type: Number, its default value should have that type too. Otherwise, the component receives a value it doesn’t expect whenever the parent doesn’t pass the prop.

Default values that are objects or arrays must be returned from a function, such as () => []. Vue calls this function for each instance of the component, so every instance gets its own copy. An object or array written directly would be shared by all instances, and changing it in one instance would change it in all of them.

This rule checks default values given in the props option, in defineProps(), in withDefaults(), in a destructured defineProps(), and in defineModel().

A default value written in a destructuring pattern, such as const { items = [] } = defineProps(), is used as it is. Vue doesn’t call it like a function, so it can be an object or an array, but it can’t be a function that creates the value.

The rule only checks props whose types are all built-in types such as String, Number, Boolean, Array, Object, or Function, and only default values whose type is clear from the code, such as numbers, strings, arrays, and objects.

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    count: {
5
      type: Number,
6
      default: "zero",
7
    },
8
  },
9
};
10
</script>

code-block.vue:6:16 lint/nursery/useVueValidDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The default value of the prop count doesn't match the type of the prop.
  
    4 │     count: {
    5 │       type: Number,
  > 6 │       default: "zero",
      │                ^^^^^^
    7 │     },
    8 │   },
  
  ℹ The prop accepts Number.
  
  ℹ 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>
2
export default {
3
  props: {
4
    items: {
5
      type: Array,
6
      default: [],
7
    },
8
  },
9
};
10
</script>

code-block.vue:6:16 lint/nursery/useVueValidDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The default value of the prop items isn't returned from a function.
  
    4 │     items: {
    5 │       type: Array,
  > 6 │       default: [],
      │                ^^
    7 │     },
    8 │   },
  
  ℹ An object or array written directly as a default value is shared by every instance of the component. Changing it in one instance changes it in all of them.
  
  ℹ Return the value from a function instead, such as () => [] or () => ({}).
  
  ℹ 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<{ label?: string }>(), {
3
  label: () => 42,
4
});
5
</script>

code-block.vue:3:16 lint/nursery/useVueValidDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The function returns a default value for the prop label that doesn't match the type of the prop.
  
    1 │ <script setup lang="ts">
    2 │ withDefaults(defineProps<{ label?: string }>(), {
  > 3 │   label: () => 42,
      │                ^^
    4 │ });
    5 │ </script>
  
  ℹ The prop accepts String.
  
  ℹ 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
const { tags = () => [] } = defineProps({ tags: Array });
3
</script>

code-block.vue:2:16 lint/nursery/useVueValidDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The default value of the prop tags is a function, but the prop doesn't accept functions.
  
    1 │ <script setup>
  > 2 │ const { tags = () => [] } = defineProps({ tags: Array });
      │                ^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ A default value in a destructuring pattern is used as it is. Vue doesn't call it to create the value.
  
  ℹ Write a value of type Array directly instead.
  
  ℹ 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
defineModel({ type: Object, default: { size: "small" } });
3
</script>

code-block.vue:2:38 lint/nursery/useVueValidDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The default value of the prop modelValue isn't returned from a function.
  
    1 │ <script setup>
  > 2 │ defineModel({ type: Object, default: { size: "small" } });
      │                                      ^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ An object or array written directly as a default value is shared by every instance of the component. Changing it in one instance changes it in all of them.
  
  ℹ Return the value from a function instead, such as () => [] or () => ({}).
  
  ℹ 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>
2
const { tags = [] } = defineProps({
3
  count: { type: Number, default: 0 },
4
  items: { type: Array, default: () => [] },
5
  options: {
6
    type: Object,
7
    default() {
8
      return { size: "small" };
9
    },
10
  },
11
  format: { type: Function, default: (value) => String(value) },
12
  tags: Array,
13
});
14
defineModel({ type: Object, default: () => ({ size: "small" }) });
15
</script>