Nuxt•2mo ago

How to use the escapeKeyDownemit in Toast in Nuxt UI

How do I use the escapeKeyDown in the toast component https://ui.nuxt.com/docs/components/toast#emits

Nuxt UI

A succinct message to provide information or feedback to the user.

11 Replies

Hi @peoray. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the escapeKeyDown emit in the Toast component in Nuxt UI, you need to listen for the escapeKeyDown event on the Toast. This event is emitted with the keyboard event when the Escape key is pressed while the toast is open. However, the knowledge sources do not provide a direct example of listening to this event in a template, as the Toasts are typically managed programmatically via the useToast composable and not rendered directly in your templates. The event is available if you are using the Toast component directly and want to handle the Escape key press. Here’s how you might use it if you render a Toast component directly:

<template>
  <UToast
    v-model:open="open"
    @escapeKeyDown="onEscape"
    title="Toast Title"
    description="Toast Description"
  />
</template>

<script setup lang="ts">
const open = ref(true)
function onEscape(event) {
  // Handle the Escape key press
  console.log('Escape pressed!', event)
}
</script>

<template>
  <UToast
    v-model:open="open"
    @escapeKeyDown="onEscape"
    title="Toast Title"
    description="Toast Description"
  />
</template>

<script setup lang="ts">
const open = ref(true)
function onEscape(event) {
  // Handle the Escape key press
  console.log('Escape pressed!', event)
}
</script>

If you are using the useToast composable (the recommended way), the toasts are managed by the global Toaster, and you do not have direct access to the events of individual Toast components. In that case, handling the Escape key at the toast level is not directly supported via the composable API according to the current documentation Toast Emits. Summary:
- The escapeKeyDown event is available when using the Toast component directly. - If you use the useToast composable, you do not have direct access to this event. If you need more advanced control, you may need to use the Toast component directly instead of the composable. Source: Toast Emits ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

peorayOP•2mo ago

@kapa.ai I'm using toast as toast.add

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When using toasts via toast.add with the useToast composable in Nuxt UI, you do not have direct access to the escapeKeyDown event for individual toasts. The escapeKeyDown emit is available only when you use the <UToast> component directly in your template, not when toasts are managed programmatically through the composable. The documentation and knowledge sources do not provide a way to handle the escapeKeyDown event when using toast.add. The composable API (useToast) is designed for simple, programmatic toast notifications and does not expose per-toast event hooks like escapeKeyDown Toast Emits useToast API. Summary:
- With toast.add, you cannot use the escapeKeyDown event. - To use escapeKeyDown, you must render <UToast> directly and listen for the event in your template. If you need to handle Escape key presses for toasts created with toast.add, the current Nuxt UI API does not support this feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

peorayOP•2mo ago

@kapa.ai how can I have this globally in app.vue and then "open" should be triggered in a component. also I want action buttons

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To achieve global toast configuration in app.vue and trigger toasts (with action buttons) from a component, you should: 1. Wrap your app with <UApp> in app.vue and configure the toaster globally
You can set global options (like position, duration, etc.) via the toaster prop:

<!-- app.vue -->
<script setup lang="ts">
const toaster = { position: 'bottom-right', duration: 5000 }
</script>

<template>
  <UApp :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

<!-- app.vue -->
<script setup lang="ts">
const toaster = { position: 'bottom-right', duration: 5000 }
</script>

<template>
  <UApp :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

Global Toaster Configuration 2. Trigger a toast with action buttons from any component using useToast
In your component, use the useToast composable and pass an actions array to toast.add:

<!-- ExampleComponent.vue -->
<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Action Required',
    description: 'Please choose an action.',
    actions: [
      {
        label: 'Confirm',
        color: 'primary',
        onClick: () => {
          // handle confirm
        }
      },
      {
        label: 'Cancel',
        color: 'neutral',
        variant: 'outline',
        onClick: () => {
          // handle cancel
        }
      }
    ]
  })
}
</script>

<template>
  <UButton label="Show toast" @click="showToast" />
</template>

<!-- ExampleComponent.vue -->
<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Action Required',
    description: 'Please choose an action.',
    actions: [
      {
        label: 'Confirm',
        color: 'primary',
        onClick: () => {
          // handle confirm
        }
      },
      {
        label: 'Cancel',
        color: 'neutral',
        variant: 'outline',
        onClick: () => {
          // handle cancel
        }
      }
    ]
  })
}
</script>

<template>
  <UButton label="Show toast" @click="showToast" />
</template>

Toast Actions Example Notes: - The toast will open when you call toast.add—there is no need to manage an open prop manually when using the composable. - Action buttons are defined in the actions array, each with properties like label, color, variant, and onClick. This setup allows you to configure toasts globally in app.vue and trigger them (with actions) from any component using the composable API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

peorayOP•2mo ago

@kapa.ai now how do I add the escapeKeyDown emit

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When using the useToast composable and toast.add, there is no documented way to handle the escapeKeyDown emit for individual toasts. The escapeKeyDown event is only available when you use the <UToast> component directly in your template, where you can listen for the event with @escapeKeyDown. The composable API (useToast) does not expose this event or provide a callback for it in the toast options. This limitation is confirmed in the knowledge sources, which show the escapeKeyDown emit in the API table for the component, but do not mention any way to handle it when using toast.add or the composable approach Toast Emits useToast API. Summary:
- You cannot use the escapeKeyDown emit with toast.add and the useToast composable. - The event is only available when rendering <UToast> directly. If you need to handle Escape key presses, you must use the <UToast> component directly in your template. The composable API does not support this feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

How to use the escapeKeyDownemit in Toast in Nuxt UI

Did you find this page helpful?