useVueValidVIf

HTML

Summary

• Rule available since: v2.3.6
• Diagnostic Category: lint/correctness/useVueValidVIf
• 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-if

How to configure

biome.json

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

Description

Enforces valid v-if usage for Vue templates.

This rule reports v-if directives in following cases:

• The directive has an argument. E.g. <div v-if:aaa="foo"></div>
• The directive has a modifier. E.g. <div v-if.bbb="foo"></div>
• The directive does not have an attribute value. E.g. <div v-if></div>
• The same element also has v-else or v-else-if. E.g. <div v-if="foo" v-else></div>

Examples

Invalid

<div v-if:aaa="foo"></div>

code-block.vue:1:10 lint/correctness/useVueValidVIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-if cannot have an argument.
  
  > 1 │ <div v-if:aaa=“foo”></div>
      │          ^^^^
    2 │ 
  
  ℹ Remove the argument. v-if takes a value expression only.
  

<div v-if.bbb="foo"></div>

code-block.vue:1:10 lint/correctness/useVueValidVIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-if cannot have modifiers.
  
  > 1 │ <div v-if.bbb=“foo”></div>
      │          ^^^^
    2 │ 
  
  ℹ Remove the modifier. v-if takes a value expression only.
  

<div v-if></div>

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

  ✖ v-if requires a value expression.
  
  > 1 │ <div v-if></div>
      │      ^^^^
    2 │ 
  
  ℹ Provide a boolean expression, e.g. v-if=“condition”.
  

<div v-if="foo" v-else></div>

code-block.vue:1:17 lint/correctness/useVueValidVIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-if cannot be used on an element that also has v-else or v-else-if.
  
  > 1 │ <div v-if=“foo” v-else></div>
      │                 ^^^^^^
    2 │ 
  
  ℹ Place v-if on one element, followed by sibling elements with v-else-if and/or v-else.
  

<div v-if="foo" v-else-if="bar"></div>

code-block.vue:1:17 lint/correctness/useVueValidVIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-if cannot be used on an element that also has v-else or v-else-if.
  
  > 1 │ <div v-if=“foo” v-else-if=“bar”></div>
      │                 ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Place v-if on one element, followed by sibling elements with v-else-if and/or v-else.
  

Valid

<div v-if="ok"></div>

<div v-if="a < b"></div>

<div v-if="a"></div>
<div v-else-if="b"></div>
<div v-else></div>

Related links

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