Nuxt•3d ago

usetoast callback when toast clears

When using useToast and creating a dynamic toast with toast.add is it possible to have a callback that triggers a function when the dynamically created toast clears?

5 Replies

kapa.ai•3d ago

Hi @Neil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not mention any built-in callback or event in the Nuxt UI's useToast composable that triggers a function specifically when a toast is cleared or removed (either individually or via clear()). The documented API for useToast includes methods to add, update, remove, and clear toasts, but there is no reference to a callback or event hook for toast removal or clearing actions. If you need this functionality, you may need to implement a custom solution by watching the toasts array and reacting to its changes manually in your component logic useToast composable. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

NeilOP•3d ago

@kapa.ai Can you provide an example of watching the toasts array and reacting to its changes? @kapa.ai could you provide an example of watching the toasts array and reacting to its changes?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! The knowledge sources confirm that useToast exposes a reactive toasts array containing all current toast notifications useToast composable. While there is no built-in callback for when a toast is cleared, you can use Vue's watch function to observe changes to this array and react accordingly. Here’s an example of how you might watch the toasts array and run a callback when a toast is removed:

<script setup lang="ts">
import { watch } from 'vue'

const toast = useToast()

// Store the previous toasts for comparison
let previousToasts = []

watch(
  () => toast.toasts.value,
  (newToasts, oldToasts) => {
    // Find removed toasts
    const removed = oldToasts.filter(
      oldToast => !newToasts.some(newToast => newToast.id === oldToast.id)
    )
    if (removed.length > 0) {
      // Callback logic for removed toasts
      removed.forEach(removedToast => {
        // Your callback here
        console.log('Toast removed:', removedToast)
      })
    }
    previousToasts = [...newToasts]
  },
  { immediate: true }
)
</script>

<script setup lang="ts">
import { watch } from 'vue'

const toast = useToast()

// Store the previous toasts for comparison
let previousToasts = []

watch(
  () => toast.toasts.value,
  (newToasts, oldToasts) => {
    // Find removed toasts
    const removed = oldToasts.filter(
      oldToast => !newToasts.some(newToast => newToast.id === oldToast.id)
    )
    if (removed.length > 0) {
      // Callback logic for removed toasts
      removed.forEach(removedToast => {
        // Your callback here
        console.log('Toast removed:', removedToast)
      })
    }
    previousToasts = [...newToasts]
  },
  { immediate: true }
)
</script>

This approach lets you react whenever a toast is removed from the array, effectively simulating a "toast cleared" callback useToast composable. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

Gaming

Programming

usetoast callback when toast clears

Did you find this page helpful?