valid-define-emits.md

Pattern: Invalid defineEmits compiler macro

Issue: -

Description

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>

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

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

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

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

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

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

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

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

Further Reading

• eslint-plugin-vue - valid-define-emits