useVueValidVCloak

HTML

Summary

• Rule available since: v2.3.11
• Diagnostic Category: lint/correctness/useVueValidVCloak
• This rule is recommended, meaning it is enabled by default.
• This rule has an unsafe fix.
• The default severity of this rule is error.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/valid-v-cloak

How to configure

biome.json

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

Description

Enforce valid v-cloak Vue directives.

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

• The directive has an argument. E.g. <div v-cloak:aaa></div>
• The directive has any modifiers. E.g. <div v-cloak.bbb></div>
• The directive has an attribute value. E.g. <div v-cloak="foo"></div>

Examples

Invalid

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

code-block.vue:1:13 lint/correctness/useVueValidVCloak  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-cloak directive must not have an argument.
  
  > 1 │ <div v-cloak:arg></div>
      │             ^^^^
    2 │ 
  
  ℹ Use v-cloak without arguments, e.g. v-cloak.
  
  ℹ Unsafe fix: Remove the argument.
  
    1 │ <div·v-cloak:arg></div>
      │             ----       

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

code-block.vue:1:13 lint/correctness/useVueValidVCloak  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-cloak directive does not support modifiers.
  
  > 1 │ <div v-cloak.mod></div>
      │             ^^^^
    2 │ 
  
  ℹ Remove the modifier; v-cloak is a stand-alone control directive.
  
  ℹ Unsafe fix: Remove the modifier.
  
    1 │ <div·v-cloak.mod></div>
      │             ----       

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

code-block.vue:1:13 lint/correctness/useVueValidVCloak  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-cloak directive must not have a value.
  
  > 1 │ <div v-cloak=“value”></div>
      │             ^^^^^^^^
    2 │ 
  
  ℹ v-cloak is a boolean-like directive and should be used without a value.
  
  ℹ Unsafe fix: Remove the value.
  
    1 │ <div·v-cloak=“value”></div>
      │             --------       

Valid

<div v-cloak></div>

Related links

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