noVueUnusedRefs (HTML)

Language HTML

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueUnusedRefs
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-unused-refs

How to configure

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

Description

Disallow template refs that are never used.

A ref attribute gives a name to an element of the template, so that the component’s code can reach that element through $refs or useTemplateRef(). When nothing reads that name, the attribute has no effect. It is usually left behind after the code that used it was removed.

A template ref counts as used when:

the template or the script reads it from $refs, as in $refs.input or this.$refs.input;
the script passes its name to useTemplateRef(), as in useTemplateRef("input");
the component exposes a variable with the same name from <script setup> or from the object that setup() returns. Vue stores the element in that variable.

Only refs written as plain text, such as ref="input", are checked. A ref bound with :ref is never reported.

The rule reports nothing when it can’t know which refs are used. That is the case when:

a ref is read with a name that is not written as a string, as in $refs[name] or useTemplateRef(name);
$refs itself is stored or handed to other code, as in const refs = this.$refs;
a <script src> block loads part of the component from another file.

Refs read from another component, for example through $parent.$refs, are not detected.

Examples

Invalid

1
<template>
2
  <input ref="input" />
3
</template>

1
<script>
2
export default {
3
  mounted() {
4
    this.$refs.input.focus();
5
  },
6
};
7
</script>
8

9
<template>
10
  <input ref="input" />
11
  <button ref="submit">Submit</button>
12
</template>

Valid

1
<script setup>
2
import { ref, useTemplateRef } from "vue";
3

4
const input = useTemplateRef("input");
5
const submit = ref(null);
6
</script>
7

8
<template>
9
  <input ref="input" />
10
  <button ref="submit">Submit</button>
11
  <span ref="label" @click="$refs.label.focus()"></span>
12
</template>