Nuxt•3w ago

Default emit definition

Hey I'm new to the vue/nuxt ecosystem. One thing I'm confused about is how to properly define a default emit. For example:

<script setup lang="ts">
const app = useNuxtApp()

type Emit = {
  (event: 'error', error: Error): void,
  (event: 'success', user: User): void
}

const emit = defineEmits<Emit>()

<script setup lang="ts">
const app = useNuxtApp()

type Emit = {
  (event: 'error', error: Error): void,
  (event: 'success', user: User): void
}

const emit = defineEmits<Emit>()

Now this works and is typed correctly, however if I try to do something akin to withDefaults on props i.e.

const emit = withDefaults(defineEmits<Emit>(), {
  error: (error: Errror) => app.$toast.error(error.message),
  success: (user: User) =>  app.$toast.sucess(`Welcome $[user.name}!`)
})

const emit = withDefaults(defineEmits<Emit>(), {
  error: (error: Errror) => app.$toast.error(error.message),
  success: (user: User) =>  app.$toast.sucess(`Welcome $[user.name}!`)
})

I've scoured all the vue/nuxt docs and stackoverflow and I was unable to find any reference to this. Is there truly no way to have a default emit handler? If not, what is the best way to do this? I could technically just pass the function in defineProps with a function - issue with this is, I get a hydration warning about mismatch - presumably because of the useNuxtApp composable or props passing / initialization. Thanks in advance

2 Replies

kapa.ai•3w ago

Hi @hulla.dev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but the knowledge sources provided do not contain specific information about defining default emit handlers in Vue or Nuxt. The concept of "default emits" is not a standard feature in Vue or Nuxt, which is likely why you haven't found documentation about it. However, based on the information available, I can provide some insights and suggestions: 1. The defineEmits function is used to define and type-check emits in Vue 3 composition API, as you've correctly used in your first code example Nuxt Docs: Using Composables (https://nuxt.com/docs/guide/directory-structure/plugins#using-composables). 2. There is no direct equivalent to withDefaults for emits. The withDefaults function is specifically for props Nuxt tips: Using defineProps with TypeScript (https://www.youtube.com/watch?v=fA0ezJCGMuA). 3. If you need to perform default actions when emitting events, you could consider wrapping your emit calls in methods that perform the default actions. For example:

<script setup lang="ts">
const app = useNuxtApp()

type Emit = {
  (event: 'error', error: Error): void,
  (event: 'success', user: User): void
}

const emit = defineEmits<Emit>()

const emitError = (error: Error) => {
  app.$toast.error(error.message)
  emit('error', error)
}

const emitSuccess = (user: User) => {
  app.$toast.success(`Welcome ${user.name}!`)
  emit('success', user)
}
</script>

<script setup lang="ts">
const app = useNuxtApp()

type Emit = {
  (event: 'error', error: Error): void,
  (event: 'success', user: User): void
}

const emit = defineEmits<Emit>()

const emitError = (error: Error) => {
  app.$toast.error(error.message)
  emit('error', error)
}

const emitSuccess = (user: User) => {
  app.$toast.success(`Welcome ${user.name}!`)
  emit('success', user)
}
</script>

This approach allows you to define default behaviors while still maintaining the ability to emit events. 4. Regarding the hydration warning you mentioned when using useNuxtApp in props, this is likely because useNuxtApp is not available during server-side rendering. You might need to use it in a lifecycle hook or with onMounted to ensure it's only called on the client side Nuxt Docs: useNuxtApp (https://nuxt.com/docs/api/composables/use-nuxt-app#properties). Remember, these are suggestions based on general Vue and Nuxt practices, as the specific feature you're asking about isn't standard in Vue or Nuxt. If you need more specific guidance, you might want to consider asking in the Vue or Nuxt community forums or GitHub issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@400765903287091202> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Default emit definition