useVueComponentIs (HTML)

Language HTML

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/useVueComponentIs
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/require-component-is

How to configure

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

Description

Require <component> elements to bind the is attribute.

Vue’s built-in <component> element renders the component passed to its is attribute, which lets you switch between components in one place. The value must be bound with :is or v-bind:is. Without it, Vue has no component to render.

A plain is="..." attribute is also reported, because it always renders the same component. Use that component directly instead.

Examples

Invalid

1
<template>
2
  <component />
3
</template>

code-block.vue:2:3 lint/nursery/useVueComponentIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <component> element doesn't bind the is attribute.
  
    1 │ <template>
  > 2 │   <component />
      │   ^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue renders the component passed to :is. Without it, there is no component to render.
  
  ℹ Bind the component with :is, or use the component directly if it never changes.
  
  ℹ 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="MyComponent" />
3
</template>

code-block.vue:2:3 lint/nursery/useVueComponentIs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <component> element doesn't bind the is attribute.
  
    1 │ <template>
  > 2 │   <component is="MyComponent" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue renders the component passed to :is. Without it, there is no component to render.
  
  ℹ Bind the component with :is, or use the component directly if it never changes.
  
  ℹ 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
  <component :is="currentView" />
3
  <component v-bind:is="currentView" />
4
</template>