noVueDeprecatedVIs (HTML)

Language HTML

Summary

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

How to configure

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

Description

Disallow the deprecated Vue v-is directive.

The v-is directive renders a component in place of a native HTML element. It is deprecated since Vue 3.1.

Use the is attribute with a vue: prefix instead, for example is="vue:MyComponent". Unlike v-is, the value of is is plain text, so the component name doesn’t need extra quotes.

Examples

Invalid

1
<template>
2
  <div v-is="'MyComponent'"></div>
3
</template>

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

  ⚠ The v-is directive is deprecated.
  
    1 │ <template>
  > 2 │   <div v-is="'MyComponent'"></div>
      │        ^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ v-is is deprecated since Vue 3.1 and may be removed in a future version.
  
  ℹ Use the is attribute with a vue: prefix instead, like is="vue:MyComponent".
  
  ℹ 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 is="vue:MyComponent"></div>
3
  <component is="MyComponent"></component>
4
</template>