vue/define-emits-declaration
enforce declaration style of
defineEmits
📖 Rule Details
This rule enforces defineEmits typing style which you should use type-based, strict type-literal (introduced in Vue 3.3), 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
}>()
/* ✓ GOOD */
const emit = defineEmits<{
change: [id: number]
update: [value: string]
}>()
/* ✗ BAD */
const emit = defineEmits({
change: (id) => typeof id == 'number',
update: (value) => typeof value == 'string'
})
/* ✗ BAD */
const emit = defineEmits(['change', 'update'])
</script>
🔧 Options
json
"vue/define-emits-declaration": ["error", "type-based" | "type-literal" | "runtime"]type-based(default) enforces type based declarationtype-literalenforces strict "type literal" 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>
type-literal
<script setup lang="ts">
/* ✗ BAD */
const emit = defineEmits(['change', 'update'])
/* ✗ BAD */
const emit = defineEmits({
change: (id) => typeof id == 'number',
update: (value) => typeof value == 'string'
})
/* ✗ BAD */
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
/* ✓ GOOD */
const emit = defineEmits<{
change: [id: number]
update: [value: string]
}>()
</script>
👫 Related Rules
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v9.5.0