Skip to content

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>
Now loading...

🔧 Options

json
  "vue/define-emits-declaration": ["error", "type-based" | "type-literal" | "runtime"]
  • type-based (default) enforces type based declaration
  • type-literal enforces strict "type literal" 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>
Now loading...

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>
Now loading...

📚 Further Reading

🚀 Version

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

🔍 Implementation