# vue/valid-define-emits

enforce valid defineEmits compiler macro

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>

<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>

<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