# vue/valid-define-emits

enforce valid defineEmits compiler macro

⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

This rule checks whether defineEmits compiler macro is valid.

# 📖 Rule Details

This rule reports defineEmits compiler macros in the following cases:

defineEmits are referencing locally declared variables.
defineEmits has both a literal type and an argument. e.g. defineEmits<(e: 'foo')=>void>(['bar'])
defineEmits has been called multiple times.
Custom events are defined in both defineEmits and export default {}.
Custom events are not defined in either defineEmits or export default {}.

<script setup>
/* ✓ GOOD */
defineEmits({ notify: null })
</script>

Now loading...

<script setup>
/* ✓ GOOD */
defineEmits(['notify'])
</script>

Now loading...

<script setup lang="ts">
/* ✓ GOOD */
defineEmits<(e: 'notify') => void>()
</script>

Now loading...

<script>
const def = { notify: null }
</script>
<script setup>
/* ✓ GOOD */
defineEmits(def)
</script>

Now loading...

<script setup>
/* ✗ BAD */
const def = { notify: null }
defineEmits(def)
</script>

Now loading...

<script setup lang="ts">
/* ✗ BAD */
defineEmits<(e: 'notify') => void>({ submit: null })
</script>

Now loading...

<script setup>
/* ✗ BAD */
defineEmits({ notify: null })
defineEmits({ submit: null })
</script>

Now loading...

<script>
export default {
  emits: { notify: null }
}
</script>
<script setup>
/* ✗ BAD */
defineEmits({ submit: null })
</script>

Now loading...

<script setup>
/* ✗ BAD */
defineEmits()
</script>

Now loading...

Nothing.

This rule was introduced in eslint-plugin-vue v7.13.0