noVueTemplateKey (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueTemplateKey
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-template-key

How to configure

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

Description

Disallow the key attribute on <template> elements in Vue.

A <template> element groups other elements without adding anything to the page. Vue uses key to tell elements apart when it updates the page, but a <template> isn’t an element on the page, so a key written on it does nothing. Put the key on the elements inside the <template> instead.

A key on a <template> that also has v-for is allowed, because Vue uses that key to keep track of each item in the list.

Examples

Invalid

1
<template>
2
  <template key="foo"><div /></template>
3
</template>

code-block.vue:2:13 lint/nursery/noVueTemplateKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The key attribute isn't allowed on a <template> element.
  
    1 │ <template>
  > 2 │   <template key="foo"><div /></template>
      │             ^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A <template> isn't an element on the page, so Vue can't use its key to tell it apart from other elements.
  
  ℹ Put the key on the elements inside the <template> instead.
  
  ℹ 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
  <template :key="item.id"><div /></template>
3
</template>

code-block.vue:2:13 lint/nursery/noVueTemplateKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The key attribute isn't allowed on a <template> element.
  
    1 │ <template>
  > 2 │   <template :key="item.id"><div /></template>
      │             ^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ A <template> isn't an element on the page, so Vue can't use its key to tell it apart from other elements.
  
  ℹ Put the key on the elements inside the <template> instead.
  
  ℹ 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 key="foo"></div>
3
  <template v-for="item in list" :key="item.id"><div /></template>
4
</template>

References

Vue key attribute