useVueValidVElseIf

HTML

Summary

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

How to configure

biome.json

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

Description

Enforce valid v-else-if directives.

Biome flags these cases:

• Has an argument: <div v-else-if:arg="b"></div>.
• Has modifiers: <div v-else-if.mod="b"></div>.
• Missing value: <div v-else-if></div>.
• Not preceded by a sibling with v-if/v-else-if.
• On the same element as v-if or v-else.

Examples

Invalid

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

code-block.vue:1:26 lint/correctness/useVueValidVElseIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-else-if directive cannot take an argument.
  
  > 1 │ <div v-if=“a”></div><div v-else-if:arg=“b”></div>
      │                          ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Remove the argument from the v-else-if directive.
  
  ℹ For example, use v-else-if=“condition” instead of v-else-if:arg=“condition”.
  

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

code-block.vue:1:35 lint/correctness/useVueValidVElseIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-else-if directive cannot have modifiers.
  
  > 1 │ <div v-if=“a”></div><div v-else-if.mod=“b”></div>
      │                                   ^^^^
    2 │ 
  
  ℹ Remove the modifier from the v-else-if directive.
  
  ℹ For example, use v-else-if=“condition” instead of v-else-if.mod=“condition”.
  

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

code-block.vue:1:26 lint/correctness/useVueValidVElseIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-else-if directive requires a conditional expression value.
  
  > 1 │ <div v-if=“a”></div><div v-else-if></div>
      │                          ^^^^^^^^^
    2 │ 
  
  ℹ Provide an expression after the ’=’ sign.
  
  ℹ For example, use v-else-if=“condition” instead of just v-else-if.
  

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

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

  ✖ The v-else-if directive must follow an element with v-if or v-else-if.
  
  > 1 │ <div v-else-if=“b”></div>
      │      ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Add a preceding element with v-if or v-else-if, or remove this directive.
  
  ℹ v-else-if directives are part of conditional chains and must follow another conditional directive.
  

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

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

  ✖ Cannot use v-else-if together with v-if or v-else on the same element.
  
  > 1 │ <div v-if=“a” v-else-if=“b”></div>
      │      ^^^^
    2 │ 
  
  ℹ Split into separate elements or remove one of the conflicting directives.
  
  ℹ Each element should only have one conditional directive from the v-if/v-else-if/v-else family.
  

Valid

<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