useVueValidVBind (HTML)

Language HTML

Summary

• Rule available since: v2.3.6
• Diagnostic Category: lint/correctness/useVueValidVBind
• This rule is recommended, meaning it is enabled by default.
• 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/valid-v-bind

How to configure

biome.json

{
  "linter": {
    "rules": {
      "correctness": {
        "useVueValidVBind": "error"
      }
    }
  }
}

Description

Forbids v-bind directives with missing values or invalid modifiers.

This rule reports v-bind directives in the following cases:

• The directive has neither a value nor a static argument from which to derive one. E.g. <div v-bind></div> or <div v-bind:[foo]></div>. v-bind:foo and :foo are accepted because they are valid Vue 3.4+ same-name shorthand for :foo="foo".
• The directive has invalid modifiers. E.g. <div v-bind:aaa.bbb="ccc"></div>

Examples

Invalid

<Foo v-bind />

code-block.vue:1:6 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This v-bind directive is missing a value.
  
  > 1 │ <Foo v-bind />
      │      ^^^^^^
    2 │ 
  
  ℹ v-bind directives require a value.
  
  ℹ Add a value to the directive, e.g. v-bind:foo="bar".
  

<div v-bind></div>

code-block.vue:1:6 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This v-bind directive is missing a value.
  
  > 1 │ <div v-bind></div>
      │      ^^^^^^
    2 │ 
  
  ℹ v-bind directives require a value.
  
  ℹ Add a value to the directive, e.g. v-bind:foo="bar".
  

Valid

<Foo v-bind:foo="foo" />

<Foo :foo />

Related links

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