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

1<script setup>
2const emit = defineEmits(['change', 'delete'])
3</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:

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

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