noVueVTextVHtmlOnComponent (HTML)

Language HTML

Summary

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

How to configure

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

Description

Disallow v-text and v-html on components.

When v-text or v-html is used on a component, Vue doesn’t put the value in the component’s slot. Instead, it replaces everything inside the component’s root element. Anything the component renders inside that element, such as icons, wrappers, or other components, is lost. If the component has more than one root element, Vue drops the value and shows a warning.

To pass content to a component, put it between the component’s opening and closing tags. To use v-text or v-html, put the directive on an HTML element inside them.

This rule treats an element as a component when its name isn’t a known HTML, SVG, or MathML element, for example <MyComponent>, <my-component>, or <component>. An element with an is attribute that starts with vue:, such as <tr is="vue:my-row">, is also a component.

Examples

Invalid

1
<template>
2
  <MyComponent v-text="content"></MyComponent>
3
</template>

code-block.vue:2:16 lint/nursery/noVueVTextVHtmlOnComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-text directive is used on a component.
  
    1 │ <template>
  > 2 │   <MyComponent v-text="content"></MyComponent>
      │                ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't put the value in the component's slot. It replaces everything inside the component's root element, so the component's own content is lost.
  
  ℹ Put the content between the component's opening and closing tags, or move v-text to an HTML element inside them.
  
  ℹ 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.

1
<template>
2
  <MyComponent v-html="html"></MyComponent>
3
</template>

code-block.vue:2:16 lint/nursery/noVueVTextVHtmlOnComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-html directive is used on a component.
  
    1 │ <template>
  > 2 │   <MyComponent v-html="html"></MyComponent>
      │                ^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't put the value in the component's slot. It replaces everything inside the component's root element, so the component's own content is lost.
  
  ℹ Put the content between the component's opening and closing tags, or move v-html to an HTML element inside them.
  
  ℹ 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.

1
<template>
2
  <component :is="tag" v-text="content"></component>
3
</template>

code-block.vue:2:24 lint/nursery/noVueVTextVHtmlOnComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-text directive is used on a component.
  
    1 │ <template>
  > 2 │   <component :is="tag" v-text="content"></component>
      │                        ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't put the value in the component's slot. It replaces everything inside the component's root element, so the component's own content is lost.
  
  ℹ Put the content between the component's opening and closing tags, or move v-text to an HTML element inside them.
  
  ℹ 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.

1
<template>
2
  <tr is="vue:my-row" v-text="content"></tr>
3
</template>

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

  ✖ The v-text directive is used on a component.
  
    1 │ <template>
  > 2 │   <tr is="vue:my-row" v-text="content"></tr>
      │                       ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't put the value in the component's slot. It replaces everything inside the component's root element, so the component's own content is lost.
  
  ℹ Put the content between the component's opening and closing tags, or move v-text to an HTML element inside them.
  
  ℹ 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
<template>
2
  <div v-text="content"></div>
3
  <div v-html="html"></div>
4
  <svg><text v-text="content" /></svg>
5
  <math><mi v-text="content" /></math>
6
  <MyComponent>{{ content }}</MyComponent>
7
  <MyComponent><span v-html="html"></span></MyComponent>
8
</template>