noVueChildContent (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueChildContent
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/no-child-content

How to configure

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

Description

Disallow content inside elements whose content is replaced by v-html or v-text.

The v-html and v-text directives replace everything between the opening and closing tags of their element. Vue discards anything written there, including text, other elements, and comments, so it never appears on the page.

Either remove the content, or remove the directive and keep the content.

Examples

Invalid

1
<template>
2
  <div v-html="html">Loading...</div>
3
</template>

code-block.vue:2:22 lint/nursery/noVueChildContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The content of this element is replaced by the v-html directive.
  
    1 │ <template>
  > 2 │   <div v-html="html">Loading...</div>
      │                      ^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ This directive replaces the content of the element.
  
    1 │ <template>
  > 2 │   <div v-html="html">Loading...</div>
      │        ^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue discards this content, so it never appears on the page.
  
  ℹ Remove the content, or remove v-html and keep the content.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the content of the element.
  
    2 │ ··<div·v-html="html">Loading...</div>
      │                      ----------

1
<template>
2
  <p v-text="message"><span>{{ fallback }}</span></p>
3
</template>

code-block.vue:2:23 lint/nursery/noVueChildContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The content of this element is replaced by the v-text directive.
  
    1 │ <template>
  > 2 │   <p v-text="message"><span>{{ fallback }}</span></p>
      │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ This directive replaces the content of the element.
  
    1 │ <template>
  > 2 │   <p v-text="message"><span>{{ fallback }}</span></p>
      │      ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue discards this content, so it never appears on the page.
  
  ℹ Remove the content, or remove v-text and keep the content.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the content of the element.
  
    2 │ ··<p·v-text="message"><span>{{·fallback·}}</span></p>
      │                       ---------------------------

1
<template>
2
  <div v-html="html"><!-- The content goes here --></div>
3
</template>

code-block.vue:2:22 lint/nursery/noVueChildContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The content of this element is replaced by the v-html directive.
  
    1 │ <template>
  > 2 │   <div v-html="html"><!-- The content goes here --></div>
      │                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ This directive replaces the content of the element.
  
    1 │ <template>
  > 2 │   <div v-html="html"><!-- The content goes here --></div>
      │        ^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue discards this content, so it never appears on the page.
  
  ℹ Remove the content, or remove v-html and keep the content.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the content of the element.
  
    2 │ ··<div·v-html="html"><!--·The·content·goes·here·--></div>
      │                      ------------------------------

Valid

1
<template>
2
  <div v-html="html"></div>
3
  <p v-text="message" />
4
  <div v-html="html">
5
  </div>
6
  <div>Loading...</div>
7
</template>

Options

`additionalDirectives`

Other directives that replace the content of their element, such as the v-t directive of Vue I18n. Write the names without the v- prefix. v-html and v-text are always checked.

Default: []

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueChildContent": {
6
          "level": "on",
7
          "options": {
8
            "additionalDirectives": [
9
              "t"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
<template>
2
  <p v-t="'greeting'">Hello</p>
3
</template>

code-block.vue:2:23 lint/nursery/noVueChildContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The content of this element is replaced by the v-t directive.
  
    1 │ <template>
  > 2 │   <p v-t="'greeting'">Hello</p>
      │                       ^^^^^
    3 │ </template>
    4 │ 
  
  ℹ This directive replaces the content of the element.
  
    1 │ <template>
  > 2 │   <p v-t="'greeting'">Hello</p>
      │      ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue discards this content, so it never appears on the page.
  
  ℹ Remove the content, or remove v-t and keep the content.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the content of the element.
  
    2 │ ··<p·v-t="'greeting'">Hello</p>
      │                       -----

Valid

1
<template>
2
  <p v-t="'greeting'"></p>
3
</template>

noVueChildContent (HTML)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

additionalDirectives

Invalid

Valid

References

Related links

`additionalDirectives`