JS.VUE.VALID.DEFINE.EMITS

defineEmits compiler macro is invalid

This rule checks whether defineEmits compiler macro is valid.

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 {}.

{'vue/valid-define-emits': ['error']}

Copy

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

{'vue/valid-define-emits': ['error']}

Copy

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

Copy

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

{'vue/valid-define-emits': ['error']}

Copy

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

{'vue/valid-define-emits': ['error']}

Copy

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

Copy

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

{'vue/valid-define-emits': ['error']}

Copy

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

{'vue/valid-define-emits': ['error']}

Copy

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

{'vue/valid-define-emits': ['error']}

Copy

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

Nothing.