no-shadow-native-events.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-shadow-native-events	disallow the use of event names that collide with native web event names

vue/no-shadow-native-events

disallow the use of event names that collide with native web event names

• ❗ This rule has not been released yet.

📖 Rule Details

This rule reports emits that shadow native HTML events.

Using native event names for emits can lead to incorrect assumptions about an emit and cause confusion. This is caused by Vue emits behaving differently from native events. E.g. :

• The payload of an emit can be chosen arbitrarily
• Vue emits do not bubble, while most native events do
• Event modifiers only work on HTML events or when the original event is re-emitted as emit payload.
• When the native event is re-emitted, the event.target might not match the actual event-listeners location.

The rule is mostly aimed at developers of component libraries.

<template>
  <!-- ✓ GOOD -->
  <button @click="$emit('close')">Close</button>
  <!-- ✗ BAD -->
  <button @click="$emit('click')">Close</button>
</template>

🔧 Options

Nothing.

👫 Related Rules

• vue/no-unused-emit-declarations
• vue/require-explicit-emits

📚 Further Reading

• Components In-Depth - Events / Component Events
• Vue RFCs - 0030-emits-option

🔍 Implementation

• Rule source
• Test source