noVueUnusedEmitDeclarations (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/noVueUnusedEmitDeclarations
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-emit-declarations

How to configure

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

Description

Disallow declaring events that a Vue component never emits.

A component lists the events it can emit with the emits option or with defineEmits(). An event that is declared but never emitted misleads the people who use the component: they can listen for the event, but their listener is never called. Such a declaration is usually left behind when the code that emitted the event was removed.

This rule reports a declared event when neither the script nor the template of the component emits it. In the template, events are emitted with $emit('name') or with the function that defineEmits() returns.

An event named update:name counts as emitted when the component declares a model called name with defineModel(), because Vue emits that event whenever the model changes.

The rule reports nothing for a component when it can’t know every event the component emits. That is the case when:

an event name is not written as a string, as in emit(eventName);
the function that emits events, the setup() context, or the component itself (this) is stored or handed to other code, as in useForm(emit);
code written elsewhere runs as part of the component and can emit the events too: mixins, extends, an object copied into the options with ..., a setup function that is not written inside the component, or a <script src> block;
the template can’t be read, because it is kept in another file, written in a language other than HTML, or given as a string in the template option;
the component is an app created with createApp(), whose template can be written in the page.

Examples

Invalid

1
import { defineComponent } from "vue";
2

3
export default defineComponent({
4
  emits: ["change", "close"],
5
  methods: {
6
    close() {
7
      this.$emit("close");
8
    },
9
  },
10
});

code-block.js:4:11 lint/nursery/noVueUnusedEmitDeclarations ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The event change is declared but never emitted.
  
    3 │ export default defineComponent({
  > 4 │   emits: ["change", "close"],
      │           ^^^^^^^^
    5 │   methods: {
    6 │     close() {
  
  ℹ Other components can listen for this event, but their listeners are never called.
  
  ℹ Remove the declaration, or emit the event.
  
  ℹ 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 lang="ts">
2
const emit = defineEmits<{
3
  change: [value: string];
4
}>();
5
</script>

Valid

1
<template>
2
  <button @click="$emit('close')">Close</button>
3
</template>
4

5
<script setup>
6
const emit = defineEmits(["change", "close"]);
7

8
function onInput(value) {
9
  emit("change", value);
10
}
11
</script>