noVueShadowNativeEvents (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noVueShadowNativeEvents
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/no-shadow-native-events

How to configure

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

Description

Disallow Vue component events named after built-in browser events.

A component can send its own events to its parent with emit. When such an event has the same name as a browser event, like click or keydown, it looks like the browser event but works differently:

The listener receives whatever value the component passes to emit, instead of the browser’s Event object.
The event only reaches the parent that listens to the component. Most browser events also reach every element that contains the element where they happened.
Modifiers that act on the browser’s Event object, such as @click.stop and @click.prevent, do nothing unless the component passes that object along.

Give the event a name that describes what happened in the component, such as save or update:modelValue.

This rule checks the event names listed in the emits option and in defineEmits(). It also checks the event names passed to this.$emit(), to the emit function that setup() receives, to the function returned by defineEmits(), and to $emit() in templates. Uppercase and lowercase letters are treated the same, so Click is reported too.

Examples

Invalid

1
<script setup>
2
defineEmits(["click"]);
3
</script>

code-block.vue:2:14 lint/nursery/noVueShadowNativeEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This component event has the same name as the browser event click.
  
    1 │ <script setup>
  > 2 │ defineEmits(["click"]);
      │              ^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ It is easy to mistake for the browser event, but it works differently: listeners receive the value passed to emit instead of an Event object, the event doesn't reach the elements around the component, and modifiers such as .stop don't work on it.
  
  ℹ Rename the event to describe what happened in the component.
  
  ℹ 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
defineEmits<{ keydown: [key: string] }>();
3
</script>

code-block.vue:2:15 lint/nursery/noVueShadowNativeEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This component event has the same name as the browser event keydown.
  
    1 │ <script setup lang="ts">
  > 2 │ defineEmits<{ keydown: [key: string] }>();
      │               ^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ It is easy to mistake for the browser event, but it works differently: listeners receive the value passed to emit instead of an Event object, the event doesn't reach the elements around the component, and modifiers such as .stop don't work on it.
  
  ℹ Rename the event to describe what happened in the component.
  
  ℹ 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>
2
export default {
3
  methods: {
4
    onClick() {
5
      this.$emit("change", 42);
6
    },
7
  },
8
};
9
</script>

code-block.vue:5:18 lint/nursery/noVueShadowNativeEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This component event has the same name as the browser event change.
  
    3 │   methods: {
    4 │     onClick() {
  > 5 │       this.$emit("change", 42);
      │                  ^^^^^^^^
    6 │     },
    7 │   },
  
  ℹ It is easy to mistake for the browser event, but it works differently: listeners receive the value passed to emit instead of an Event object, the event doesn't reach the elements around the component, and modifiers such as .stop don't work on it.
  
  ℹ Rename the event to describe what happened in the component.
  
  ℹ 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
<script setup>
2
const emit = defineEmits(["save"]);
3
emit("save");
4
</script>