noVueBooleanDefault (JavaScript)

Language JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/noVueBooleanDefault
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/no-boolean-default

How to configure

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

Description

Disallow default values for Boolean props in Vue components.

Vue treats a Boolean prop like an HTML boolean attribute: it is true when present and false when absent. A default value breaks that convention. With default: true, the prop can only be turned off by explicitly binding false, and default: false restates what Vue already does.

This rule checks props declared through the props option, defineProps(), withDefaults(), and destructured defineProps() with default values.

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    disabled: {
5
      type: Boolean,
6
      default: true,
7
    },
8
  },
9
};
10
</script>

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

  ⚠ This Boolean prop has a default value.
  
    4 │     disabled: {
    5 │       type: Boolean,
  > 6 │       default: true,
      │                ^^^^
    7 │     },
    8 │   },
  
  ℹ Vue already defaults an absent Boolean prop to false. A default of true means the prop can only be turned off by explicitly passing false.
  
  ℹ Remove the default value. If the prop should be enabled by default, invert its name and meaning instead, for example disabled instead of enabled.
  
  ℹ 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<{ disabled?: boolean }>(), {
3
  disabled: false,
4
});
5
</script>

code-block.vue:3:13 lint/nursery/noVueBooleanDefault ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This Boolean prop has a default value.
  
    1 │ <script setup lang="ts">
    2 │ withDefaults(defineProps<{ disabled?: boolean }>(), {
  > 3 │   disabled: false,
      │             ^^^^^
    4 │ });
    5 │ </script>
  
  ℹ Vue already defaults an absent Boolean prop to false. A default of true means the prop can only be turned off by explicitly passing false.
  
  ℹ Remove the default value. If the prop should be enabled by default, invert its name and meaning instead, for example disabled instead of enabled.
  
  ℹ 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 { disabled = false } = defineProps<{ disabled?: boolean }>();
3
</script>

code-block.vue:2:20 lint/nursery/noVueBooleanDefault ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This Boolean prop has a default value.
  
    1 │ <script setup lang="ts">
  > 2 │ const { disabled = false } = defineProps<{ disabled?: boolean }>();
      │                    ^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Vue already defaults an absent Boolean prop to false. A default of true means the prop can only be turned off by explicitly passing false.
  
  ℹ Remove the default value. If the prop should be enabled by default, invert its name and meaning instead, for example disabled instead of enabled.
  
  ℹ 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>
2
export default {
3
  props: {
4
    disabled: Boolean,
5
    size: {
6
      type: Number,
7
      default: 1,
8
    },
9
  },
10
};
11
</script>

1
<script setup lang="ts">
2
defineProps<{ disabled?: boolean }>();
3
</script>