useVueEmitValidator (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueEmitValidator
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/require-emit-validator

How to configure

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

Description

Require a validator function for each event declared in the emits option or in defineEmits().

A component can declare the events it sends to its parent with the emits option, or with defineEmits() in <script setup>. When the events are declared as an object, each event can have a validator: a function that receives the values passed with the event, and returns true when they are valid. Vue warns during development when a validator returns false.

A validator also documents which values the event sends. In TypeScript, the parameter types of the validator become the types that the emit function accepts for that event.

This rule reports events that are declared without a validator, either because they are listed in an array of names, or because their value in the object is null or another value that isn’t a function. A variable used as the value is accepted, because it may hold a function declared elsewhere.

Events declared with a type, as in defineEmits<{ change: [id: number] }>(), already describe their values and are not reported.

Examples

Invalid

1
<script>
2
export default {
3
  emits: ["change"],
4
};
5
</script>

code-block.vue:3:11 lint/nursery/useVueEmitValidator ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The event change is declared without a validator function.
  
    1 │ <script>
    2 │ export default {
  > 3 │   emits: ["change"],
      │           ^^^^^^^^
    4 │ };
    5 │ </script>
  
  ℹ A validator function checks the values passed with the event, and documents what the event sends. In TypeScript, its parameter types also become the types the emit function accepts for this event.
  
  ℹ Declare the events in an object instead of an array, and give this event a function that receives its values and returns true when they are valid. If the event sends no values, use () => true.
  
  ℹ 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
defineEmits({
3
  change: null,
4
});
5
</script>

code-block.vue:3:3 lint/nursery/useVueEmitValidator  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The event change is declared with a value that turns off validation.
  
    1 │ <script setup>
    2 │ defineEmits({
  > 3 │   change: null,
      │   ^^^^^^^^^^^^
    4 │ });
    5 │ </script>
  
  ℹ A validator function checks the values passed with the event, and documents what the event sends. In TypeScript, its parameter types also become the types the emit function accepts for this event.
  
  ℹ Replace the value with a function that receives the event's values and returns true when they are valid. If the event sends no values, use () => true.
  
  ℹ 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.
  
  ℹ Unsafe fix: Replace it with a validator function that accepts no values.
  
    1 1 │   <script setup>
    2 2 │   defineEmits({
    3   │ - ··change:·null,
      3 │ + ··change:·()·=>·true,
    4 4 │   });
    5 5 │   </script>

Valid

1
<script>
2
import { isNumber } from "./validators";
3

4
export default {
5
  emits: {
6
    change: (id) => typeof id === "number",
7
    close: () => true,
8
    select: isNumber,
9
  },
10
};
11
</script>

1
<script setup lang="ts">
2
defineEmits<{ change: [id: number] }>();
3
</script>