noVueDeprecatedHtmlElementIs (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedHtmlElementIs
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-deprecated-html-element-is

How to configure

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

Description

Disallow the is attribute on HTML elements in Vue templates.

In Vue 2, you could add is to an HTML element, such as <tr is="my-row">, to render a component in its place. Vue 3 removed this. On an HTML, SVG, or MathML element, Vue 3 passes is to the browser as a regular attribute, so the component isn’t rendered.

To render a component in place of an HTML element, prefix the value with vue:, as in <tr is="vue:my-row">. To choose the component while the app is running, use the built-in <component> element, as in <component :is="current">.

This rule doesn’t report is on components, such as <MyComponent> or <component>.

Examples

Invalid

1
<template>
2
  <div is="my-component" />
3
</template>

code-block.vue:2:8 lint/nursery/noVueDeprecatedHtmlElementIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The is attribute is used on a built-in element.
  
    1 │ <template>
  > 2 │   <div is="my-component" />
      │        ^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue 3 no longer renders a component in place of a built-in HTML, SVG, or MathML element with is. It passes the attribute to the browser instead.
  
  ℹ Prefix the value with vue:, or use the <component> element to render a component.
  
  ℹ 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
  <div :is="currentComponent" />
3
</template>

code-block.vue:2:8 lint/nursery/noVueDeprecatedHtmlElementIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The is attribute is used on a built-in element.
  
    1 │ <template>
  > 2 │   <div :is="currentComponent" />
      │        ^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue 3 no longer renders a component in place of a built-in HTML, SVG, or MathML element with is. It passes the attribute to the browser instead.
  
  ℹ Use the <component> element to choose which component to render.
  
  ℹ 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 />
3
  <div is="vue:my-component" />
4
  <component is="my-component" />
5
  <component :is="currentComponent" />
6
  <MyComponent is="my-component" />
7
</template>