# vue/define-emits-declaration
enforce declaration style of
defineEmits
# 📖 Rule Details
This rule enforces defineEmits typing style which you should use type-based or runtime declaration.
This rule only works in setup script and lang="ts".
<script setup lang="ts">
/* ✓ GOOD */
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
/* ✗ BAD */
const emit = defineEmits({
change: (id) => typeof id == 'number',
update: (value) => typeof value == 'string'
})
/* ✗ BAD */
const emit = defineEmits(['change', 'update'])
</script>
# 🔧 Options
"vue/define-emits-declaration": ["error", "type-based" | "runtime"]
type-based(default) enforces type-based declarationruntimeenforces runtime declaration
# runtime
<script setup lang="ts">
/* ✗ BAD */
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
/* ✓ GOOD */
const emit = defineEmits({
change: (id) => typeof id == 'number',
update: (value) => typeof value == 'string'
})
/* ✓ GOOD */
const emit = defineEmits(['change', 'update'])
</script>
# 👫 Related Rules
# 📚 Further Reading
defineEmits(opens new window)- Typescript-only-features of
defineEmits(opens new window) - Guide - Typing-component-emits (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v9.5.0