noVueChildContent (HTML)

Language HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

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

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueChildContent": "error"
      }
    }
  }
}

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

<template>
  <div v-html="html">Loading...</div>
</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>
      │                      ----------      

<template>
  <p v-text="message"><span>{{ fallback }}</span></p>
</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>
      │                       ---------------------------    

<template>
  <div v-html="html"><!-- The content goes here --></div>
</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

<template>
  <div v-html="html"></div>
  <p v-text="message" />
  <div v-html="html">
  </div>
  <div>Loading...</div>
</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: []

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueChildContent": {
          "level": "on",
          "options": {
            "additionalDirectives": [
              "t"
            ]
          }
        }
      }
    }
  }
}

Invalid

<template>
  <p v-t="'greeting'">Hello</p>
</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

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

References

• Vue v-html directive
• Vue v-text directive

Related links

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