defineEmit

Stability: experimental ⚠️ Experimental feature, use at your risk

Declare single emit one by one using defineEmit.

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript	✅
Volar Plugin	✅

WARNING

defineEmit can not be used with defineEmits at same time

API Reference

defineEmit<T>(emitName)
defineEmit<T>(emitName, validator)

// emitName parameter can be optional,
// and will be inferred from variable name
const emitName = defineEmit<T>()

Basic Usage

<script setup>
// Declare emit
const increment = defineEmit('increment')
// Infer emit name from variable name
const change = defineEmit()
// emit event
increment()
</script>

With Validation

<script setup>
// Declare event with validation
const increment = defineEmit('increment', (value) => value < 20)
</script>

TypeScript

<script setup lang="ts">
const increment = defineEmit('increment', (value: number) => value < 20)
const decrement = defineEmit<[value: number]>()

increment(2) // pass
increment('2') // TS type error
</script>

Volar Configuration

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // or 2.7 for Vue 2
    "plugins": [
      "@vue-macros/volar/define-emit",
      // ...more feature
    ],
  },
}