useVueValidVPre

HTML

Summary

Rule available since: v2.3.11
Diagnostic Category: lint/correctness/useVueValidVPre
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-pre

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useVueValidVPre": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce valid v-pre Vue directives.

Examples

Invalid

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

The directive has an argument so it is invalid.

1
<div v-pre:arg></div>

code-block.vue:1:11 lint/correctness/useVueValidVPre  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

The directive has a modifier so it is invalid.

1
<div v-pre.mod></div>

code-block.vue:1:11 lint/correctness/useVueValidVPre  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

The directive has a value so it is invalid.

1
<div v-pre="value"></div>

code-block.vue:1:11 lint/correctness/useVueValidVPre  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

Valid

1
<div v-pre></div>