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.
Warning
Currently, complex types and type imports from other files are not supported. The type declaration argument must be one of the following to ensure correct static analysis:
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Dynamically Change Page Title
I will show you a few ways how you can easily change the page title when navigating your application
Nuxt Tip: Adding a Latest Route
Utilizing Nuxt Middleware, you can implement an easy way for visitors to always read the latest blog posts (or any other content) without needing to know its name or specific URL.