Vue Tip: Typing Component Events

To declare emits with full type inference support, we can use the defineEmits API, which is automatically available inside <script setup>:

<script setup>
const emit = defineEmits(['change', 'delete'])
</script>

defineEmits is a compiler macro only usable inside <script setup>. It does not need to be imported and is compiled away when <script setup> is processed. defineEmits provide proper type inference based on the options passed.

Using TypeScript, it is also possible to declare props and emits using pure type annotations:

<script setup>
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'delete', value: string): void
}>()
</script>

defineEmits can only use either runtime declaration OR type declaration. Using both at the same time will result in a compile error.