noVueRequiredPropWithDefault (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noVueRequiredPropWithDefault
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-required-prop-with-default

How to configure

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

Description

Disallow props that are both required and have a default value.

A prop with a default value can be omitted, because Vue falls back to the default value. Marking such a prop as required is contradictory: parent components are expected to always pass a required prop, so its default value should never be needed.

This rule checks props declared with the props option, with defineProps(), and with type-based defineProps<T>() whose defaults are provided through withDefaults() or props destructuring.

Examples

Invalid

1
<script setup lang="ts">
2
const props = withDefaults(
3
  defineProps<{
4
    name: string;
5
  }>(),
6
  {
7
    name: "Foo",
8
  },
9
);
10
</script>

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

  ⚠ The prop name is required, but it also has a default value.
  
    2 │ const props = withDefaults(
    3 │   defineProps<{
  > 4 │     name: string;
      │     ^^^^^^^^^^^^^
    5 │   }>(),
    6 │   {
  
  ℹ The default value is declared here.
  
    5 │   }>(),
    6 │   {
  > 7 │     name: "Foo",
      │     ^^^^^^^^^^^
    8 │   },
    9 │ );
  
  ℹ Parent components are expected to always pass a required prop, so its default value should never be needed.
  
  ℹ 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.
  
  ℹ Unsafe fix: Make the prop optional.
  
    4 │ ····name?:·string;
      │         +

1
<script setup lang="ts">
2
const { name = "Foo" } = defineProps<{
3
  name: string;
4
}>();
5
</script>

code-block.vue:3:3 lint/nursery/noVueRequiredPropWithDefault  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The prop name is required, but it also has a default value.
  
    1 │ <script setup lang="ts">
    2 │ const { name = "Foo" } = defineProps<{
  > 3 │   name: string;
      │   ^^^^^^^^^^^^^
    4 │ }>();
    5 │ </script>
  
  ℹ The default value is declared here.
  
    1 │ <script setup lang="ts">
  > 2 │ const { name = "Foo" } = defineProps<{
      │         ^^^^^^^^^^^^
    3 │   name: string;
    4 │ }>();
  
  ℹ Parent components are expected to always pass a required prop, so its default value should never be needed.
  
  ℹ 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.
  
  ℹ Unsafe fix: Make the prop optional.
  
    3 │ ··name?:·string;
      │       +

1
<script>
2
export default {
3
  props: {
4
    name: {
5
      required: true,
6
      default: "Foo",
7
    },
8
  },
9
};
10
</script>

code-block.vue:5:7 lint/nursery/noVueRequiredPropWithDefault  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The prop name is required, but it also has a default value.
  
    3 │   props: {
    4 │     name: {
  > 5 │       required: true,
      │       ^^^^^^^^^^^^^^
    6 │       default: "Foo",
    7 │     },
  
  ℹ The default value is declared here.
  
    4 │     name: {
    5 │       required: true,
  > 6 │       default: "Foo",
      │       ^^^^^^^^^^^^^^
    7 │     },
    8 │   },
  
  ℹ Parent components are expected to always pass a required prop, so its default value should never be needed.
  
  ℹ 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.
  
  ℹ Unsafe fix: Make the prop optional.
  
     3  3 │     props: {
     4  4 │       name: {
     5    │ - ······required:·true,
        5 │ + ······required:·false,
     6  6 │         default: "Foo",
     7  7 │       },

Valid

1
<script setup lang="ts">
2
const props = withDefaults(
3
  defineProps<{
4
    name?: string;
5
    age: number;
6
  }>(),
7
  {
8
    name: "Foo",
9
  },
10
);
11
</script>

1
<script setup>
2
const props = defineProps({
3
  name: {
4
    required: false,
5
    default: "Foo",
6
  },
7
  age: {
8
    required: true,
9
  },
10
});
11
</script>