useVueValidVIs (HTML)

Language HTML

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueValidVIs
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/valid-v-is

How to configure

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

Description

Enforce valid v-is Vue directives.

The v-is directive tells Vue to render a component in place of a native HTML element, such as <tr v-is="'my-row'">. Its value is a JavaScript expression, so a fixed component name needs its own quotes inside the attribute value.

This rule reports v-is directives in the following cases:

The directive has an argument. E.g. <div v-is:aaa="'my-row'"></div>
The directive has any modifiers. E.g. <div v-is.bbb="'my-row'"></div>
The directive does not have a value. E.g. <div v-is></div>
The directive is on a component instead of a native HTML element. E.g. <MyComponent v-is="'my-row'"></MyComponent>

An element counts as a component when its name isn’t a known HTML, SVG, or MathML element, for example <MyComponent>, <my-component>, or <component>.

Examples

Invalid

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

code-block.vue:2:11 lint/nursery/useVueValidVIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-is directive does not accept an argument.
  
    1 │ <template>
  > 2 │   <tr v-is:row="'my-row'"></tr>
      │           ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Remove the argument. Pass the component name as the value instead, like v-is="'my-row'".
  
  ℹ 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 v-is.lazy="'my-row'"></tr>
3
</template>

code-block.vue:2:11 lint/nursery/useVueValidVIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-is directive does not support modifiers.
  
    1 │ <template>
  > 2 │   <tr v-is.lazy="'my-row'"></tr>
      │           ^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Remove the modifiers. v-is doesn't accept any.
  
  ℹ 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 v-is></tr>
3
</template>

code-block.vue:2:7 lint/nursery/useVueValidVIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-is directive is missing a value.
  
    1 │ <template>
  > 2 │   <tr v-is></tr>
      │       ^^^^
    3 │ </template>
    4 │ 
  
  ℹ The value tells Vue which component to render. For example, v-is="'my-row'" renders the my-row 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
  <MyComponent v-is="'my-row'"></MyComponent>
3
</template>

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

  ✖ The v-is directive is used on a component.
  
    1 │ <template>
  > 2 │   <MyComponent v-is="'my-row'"></MyComponent>
      │                ^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ v-is is meant for native HTML elements, such as <tr> or <div>. It tells Vue to render a component in place of the element.
  
  ℹ Use the component tag directly, or use <component :is="..."> to choose the component while the app runs.
  
  ℹ 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
  <tr v-is="'my-row'"></tr>
3
  <div v-is="componentName"></div>
4
</template>

References

Vue is attribute