useVueValidVElse

HTML

Summary

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

How to configure

biome.json

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

Description

Enforce valid usage of v-else.

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

• The directive has an argument. E.g. <div v-if="foo"></div><div v-else:aaa></div>
• The directive has a modifier. E.g. <div v-if="foo"></div><div v-else.bbb></div>
• The directive has an attribute value. E.g. <div v-if="foo"></div><div v-else="bar"></div>
• The directive is on elements where the previous element doesn’t have v-if/v-else-if directives. E.g. <div v-else></div>
• The directive is on elements which have v-if/v-else-if directives. E.g. <div v-if="foo" v-else></div>

Examples

Invalid

<div v-else:arg></div>

code-block.vue:1:12 lint/correctness/useVueValidVElse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-else must not have an argument.
  
  > 1 │ <div v-else:arg></div>
      │            ^^^^
    2 │ 
  
  ℹ Remove the argument; v-else is a stand-alone control directive.
  

<div v-else.mod></div>

code-block.vue:1:12 lint/correctness/useVueValidVElse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-else must not have modifiers.
  
  > 1 │ <div v-else.mod></div>
      │            ^^^^
    2 │ 
  
  ℹ Remove the modifier; v-else is a stand-alone control directive.
  

<div v-else="value"></div>

code-block.vue:1:12 lint/correctness/useVueValidVElse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ v-else must not have a value.
  
  > 1 │ <div v-else=“value”></div>
      │            ^^^^^^^^
    2 │ 
  
  ℹ Remove the value; v-else is a stand-alone control directive.
  

<div v-else></div>

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

  ✖ v-else requires a previous sibling element with v-if or v-else-if.
  
  > 1 │ <div v-else></div>
      │      ^^^^^^
    2 │ 
  
  ℹ Place v-else immediately after an element with v-if or v-else-if, within the same parent.
  

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

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

  ✖ v-else cannot be used on the same element as v-if or v-else-if.
  
  > 1 │ <div v-if=“foo” v-else></div>
      │                 ^^^^^^
    2 │ 
  
  ℹ Move v-else onto a separate element immediately following the v-if/v-else-if element.
  

Valid

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

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

Related links

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