define-emits-declaration.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/define-emits-declaration	enforce declaration style of `defineEmits`	v9.5.0

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 declaration
• runtime enforces 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

• vue/define-props-declaration
• vue/valid-define-emits

📚 Further Reading

• defineEmits
• Typescript-only-features of defineEmits
• Guide - Typing-component-emits

🚀 Version

This rule was introduced in eslint-plugin-vue v9.5.0

🔍 Implementation

• Rule source
• Test source