noVueTemplateShadow (HTML)

Language HTML

Summary

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

How to configure

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

Description

Disallow template variables that reuse the name of a variable from an outer scope.

v-for and v-slot create variables that only exist inside their element. When one of these variables has the same name as a variable the template can already see, the new variable hides the old one. Inside the element, the name always refers to the new variable, so the outer value can’t be used there, and readers can easily confuse the two.

The variables that can be hidden are:

variables created by an enclosing v-for or v-slot;
top-level variables and imports of <script setup>;
what the component exposes to its template: props, models created with defineModel(), data, asyncData, computed properties, methods, injected values, and the values returned by setup().

Types declared in <script setup lang="ts"> are not variables, so a template variable can reuse their names.

Examples

Invalid

1
<template>
2
  <div v-for="item in groups">
3
    <span v-for="item in item.children">{{ item }}</span>
4
  </div>
5
</template>

code-block.vue:3:18 lint/nursery/noVueTemplateShadow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The template variable item hides a variable with the same name.
  
    1 │ <template>
    2 │   <div v-for="item in groups">
  > 3 │     <span v-for="item in item.children">{{ item }}</span>
      │                  ^^^^
    4 │   </div>
    5 │ </template>
  
  ℹ The hidden item is declared here.
  
    1 │ <template>
  > 2 │   <div v-for="item in groups">
      │               ^^^^
    3 │     <span v-for="item in item.children">{{ item }}</span>
    4 │   </div>
  
  ℹ Inside this element, item refers to the template variable, so the other item can't be used, and the two are easy to confuse.
  
  ℹ Rename the template variable.
  
  ℹ 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
<script setup>
2
const item = "selected";
3
</script>
4

5
<template>
6
  <div v-for="item in items">{{ item }}</div>
7
</template>

Valid

1
<template>
2
  <div v-for="group in groups">
3
    <span v-for="child in group.children">{{ child }}</span>
4
  </div>
5
  <div v-for="group in otherGroups">{{ group }}</div>
6
</template>

Options

`allow`

Type: string[]

Default: []

A list of names that template variables may reuse. A variable with one of these names is never reported.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueTemplateShadow": {
6
          "level": "on",
7
          "options": {
8
            "allow": [
9
              "item"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Valid (using `allow`)

1
<template>
2
  <div v-for="item in groups">
3
    <span v-for="item in item.children">{{ item }}</span>
4
  </div>
5
</template>