noVueUselessVBind (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/noVueUselessVBind
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Inspired from vue/no-useless-v-bind

How to configure

biome.json

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

Description

Disallow v-bind directives whose value is a fixed string.

A v-bind directive, written as v-bind:name or :name, sets an attribute to the result of a JavaScript expression. When that expression is a fixed string, such as 'foo', the directive always produces the same value. A plain attribute like id="foo" does the same thing and is easier to read.

The rule doesn’t report directives with modifiers, such as :id.prop="'foo'", because modifiers change how Vue applies the value. It also skips elements inside a v-pre element, where Vue leaves the template as written.

Examples

Invalid

<template>
  <div :id="'foo'" />
</template>

code-block.vue:2:8 lint/nursery/noVueUselessVBind  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This v-bind directive binds a fixed string.
  
    1 │ <template>
  > 2 │   <div :id="'foo'" />
      │        ^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A plain attribute gives the same result without v-bind, and is easier to read.
  
  ℹ Remove v-bind and write the string as the attribute 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: Replace the directive with a plain attribute.
  
    2 │ ··<div·:id="'foo'"·/>
      │        -    -   -    

<template>
  <div v-bind:title="`Hello`" />
</template>

code-block.vue:2:8 lint/nursery/noVueUselessVBind  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This v-bind directive binds a fixed string.
  
    1 │ <template>
  > 2 │   <div v-bind:title="`Hello`" />
      │        ^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A plain attribute gives the same result without v-bind, and is easier to read.
  
  ℹ Remove v-bind and write the string as the attribute 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: Replace the directive with a plain attribute.
  
    1 1 │   <template>
    2   │ - ··<div·v-bind:title="`Hello`"·/>
      2 │ + ··<div·title="Hello"·/>
    3 3 │   </template>
    4 4 │   
  

Valid

<template>
  <div id="foo" />
  <div :id="foo" />
  <div :id="'foo' + bar" />
  <div :id="`foo-${bar}`" />
  <div :id.prop="'foo'" />
</template>

Options

ignoreComments

Default: false

When true, the rule doesn’t report a directive whose value contains a comment.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueUselessVBind": {
          "level": "on",
          "options": {
            "ignoreComments": true
          }
        }
      }
    }
  }
}

Invalid

<template>
  <div :id="'foo'" />
</template>

code-block.vue:2:8 lint/nursery/noVueUselessVBind  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This v-bind directive binds a fixed string.
  
    1 │ <template>
  > 2 │   <div :id="'foo'" />
      │        ^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A plain attribute gives the same result without v-bind, and is easier to read.
  
  ℹ Remove v-bind and write the string as the attribute 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: Replace the directive with a plain attribute.
  
    2 │ ··<div·:id="'foo'"·/>
      │        -    -   -    

Valid

<template>
  <div :id="'foo' /* used by the tests */" />
</template>

ignoreStringEscapes

Default: false

When true, the rule doesn’t report a directive whose string contains an escape sequence for a special character, such as \n for a line break or \x41 for a character code. A plain attribute can’t contain these escape sequences.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueUselessVBind": {
          "level": "on",
          "options": {
            "ignoreStringEscapes": true
          }
        }
      }
    }
  }
}

Invalid

<template>
  <div :title="'It\'s here'" />
</template>

code-block.vue:2:8 lint/nursery/noVueUselessVBind  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This v-bind directive binds a fixed string.
  
    1 │ <template>
  > 2 │   <div :title="'It\'s here'" />
      │        ^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A plain attribute gives the same result without v-bind, and is easier to read.
  
  ℹ Remove v-bind and write the string as the attribute 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: Replace the directive with a plain attribute.
  
    1 1 │   <template>
    2   │ - ··<div·:title="'It\'s·here'"·/>
      2 │ + ··<div·title="It's·here"·/>
    3 3 │   </template>
    4 4 │   
  

Valid

<template>
  <div :title="'Line 1\nLine 2'" />
</template>

Related links

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