noVueVText (HTML)

Language HTML

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noVueVText
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-v-text

How to configure

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

Description

Disallow the use of Vue’s v-text directive.

The v-text directive fills an element with text from a value, and replaces anything written between the element’s tags. Because the text is set from an attribute, someone reading the template cannot see where it ends up.

Put the value between double curly braces ({{ }}) instead. Vue calls this text interpolation. It shows the text exactly where it appears in the template, and it can be mixed with other text in the same element.

Examples

Invalid

1
<div v-text="message"></div>

code-block.vue:1:6 lint/nursery/noVueVText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected use of the v-text directive.
  
  > 1 │ <div v-text="message"></div>
      │      ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ v-text replaces everything inside the element, so the text it shows is not visible where it appears in the template.
  
  ℹ Put the value between double curly braces inside the element instead, like {{ message }}.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<div>{{ message }}</div>
2
<p>Hello, {{ name }}!</p>