useVueConsistentBooleanPropStyle (HTML)

Language HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.6.5
• Diagnostic Category: lint/nursery/useVueConsistentBooleanPropStyle
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/prefer-true-attribute-shorthand

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentBooleanPropStyle": "error"
      }
    }
  }
}

Description

Enforce a consistent style for component props set to true.

In Vue, a Boolean prop written without a value receives true. This means <MyComponent disabled /> passes the same value as <MyComponent :disabled="true" />, and the shorthand form is easier to read.

This rule only checks components. On native HTML elements, an attribute without a value isn’t always the same as true: for example, <div data-active> sets data-active to an empty string.

Caution

In Vue, the shorthand form passes true only to props declared with the Boolean type. It passes an empty string instead when the prop isn’t declared as Boolean, when its type lists String before Boolean, such as type: [String, Boolean], or when the component doesn’t declare the prop and Vue adds it to the component’s root element as an HTML attribute. Check how the component declares the prop before applying the fix. To catch props that list another type before Boolean, use useVueBooleanPropTypeFirst.

Examples

Invalid

<template>
  <MyComponent :disabled="true" />
</template>

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

  ℹ The prop disabled has the value true, which can be omitted.
  
    1 │ <template>
  > 2 │   <MyComponent :disabled="true" />
      │                ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A prop written without a value receives true, so the shorthand form is shorter and passes the same value.
  
  ℹ The shorthand form passes true only if the component declares the prop as Boolean and doesn't list String before Boolean. Otherwise, it passes an empty string. Check how the component declares the prop before you remove the value.
  
  ℹ 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: Remove the value.
  
    2 │ ··<MyComponent·:disabled="true"·/>
      │                -        -------   

<template>
  <MyComponent v-bind:disabled="true" />
</template>

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

  ℹ The prop disabled has the value true, which can be omitted.
  
    1 │ <template>
  > 2 │   <MyComponent v-bind:disabled="true" />
      │                ^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A prop written without a value receives true, so the shorthand form is shorter and passes the same value.
  
  ℹ The shorthand form passes true only if the component declares the prop as Boolean and doesn't list String before Boolean. Otherwise, it passes an empty string. Check how the component declares the prop before you remove the value.
  
  ℹ 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: Remove the value.
  
    1 1 │   <template>
    2   │ - ··<MyComponent·v-bind:disabled="true"·/>
      2 │ + ··<MyComponent·disabled·/>
    3 3 │   </template>
    4 4 │   
  

Valid

<template>
  <MyComponent disabled />
  <MyComponent :disabled="false" />
  <MyComponent :disabled="isDisabled" />
  <MyComponent disabled="true" />
  <input :disabled="true" />
</template>

Options

style

Default: "shorthand"

How a prop set to true should be written:

• "shorthand": write only the name of the prop, such as disabled.
• "longhand": write the value true explicitly, such as :disabled="true".

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentBooleanPropStyle": {
          "level": "on",
          "options": {
            "style": "longhand"
          }
        }
      }
    }
  }
}

Invalid

<template>
  <MyComponent disabled />
</template>

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

  ℹ The prop disabled is written without a value.
  
    1 │ <template>
  > 2 │   <MyComponent disabled />
      │                ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ This project requires writing the value true explicitly, which makes it clear that the prop receives a boolean.
  
  ℹ A prop without a value receives true only if the component declares it as Boolean and doesn't list String before Boolean. Otherwise, it receives an empty string. Check how the component declares the prop before you add the value.
  
  ℹ 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: Write the value true explicitly.
  
    2 │ ··<MyComponent·:disabled="true"·/>
      │                +        +++++++   

Valid

<template>
  <MyComponent :disabled="true" />
  <MyComponent v-bind:disabled="true" />
</template>

except

Default: []

A list of prop names that must use the opposite of style. Names must match exactly, as written in the template. With the default style, the following configuration requires value to be written in the longhand form:

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentBooleanPropStyle": {
          "level": "on",
          "options": {
            "except": [
              "value"
            ]
          }
        }
      }
    }
  }
}

Invalid

<template>
  <MyComponent value />
</template>

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

  ℹ The prop value is written without a value.
  
    1 │ <template>
  > 2 │   <MyComponent value />
      │                ^^^^^
    3 │ </template>
    4 │ 
  
  ℹ This project requires writing the value true explicitly, which makes it clear that the prop receives a boolean.
  
  ℹ A prop without a value receives true only if the component declares it as Boolean and doesn't list String before Boolean. Otherwise, it receives an empty string. Check how the component declares the prop before you add the value.
  
  ℹ 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: Write the value true explicitly.
  
    2 │ ··<MyComponent·:value="true"·/>
      │                +     +++++++   

Valid

<template>
  <MyComponent :value="true" disabled />
</template>

See Also

• If you want a consistent style for v-bind in Vue, see useVueConsistentVBindStyle.
• If you want Boolean to be listed first in the type of a prop, see useVueBooleanPropTypeFirst.

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground