useToast
A composable to display toast notifications in your app.
Usage
Use the auto-imported useToast
composable to display Toast notifications.
<script setup lang="ts">
const toast = useToast()
</script>
- The
useToast
composable uses Nuxt'suseState
to manage the toast state, ensuring reactivity across your application. - A maximum of 5 toasts are displayed at a time. When adding a new toast that would exceed this limit, the oldest toast is automatically removed.
- When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.
Make sure to wrap your app with the
App
component which uses our Toaster
component which uses the ToastProvider
component from Reka UI.API
add(toast: Partial<Toast>): Toast
Adds a new toast notification.
- Parameters:
toast
: A partialToast
object with the following properties:id
(optional): A unique identifier for the toast. If not provided, a timestamp will be used.open
(optional): Whether the toast is open. Defaults totrue
.- Other properties from the
Toast
interface.
- Returns: The complete
Toast
object that was added.
<script setup lang="ts">
const toast = useToast()
function showToast() {
toast.add({
title: 'Success',
description: 'Your action was completed successfully.',
color: 'success'
})
}
</script>
update(id: string | number, toast: Partial<Toast>)
Updates an existing toast notification.
- Parameters:
id
: The unique identifier of the toast to update.toast
: A partialToast
object with the properties to update.
<script setup lang="ts">
const toast = useToast()
function updateToast(id: string | number) {
toast.update(id, {
title: 'Updated Toast',
description: 'This toast has been updated.'
})
}
</script>
remove(id: string | number)
Removes a toast notification.
- Parameters:
id
: The unique identifier of the toast to remove.
<script setup lang="ts">
const toast = useToast()
function removeToast(id: string | number) {
toast.remove(id)
}
</script>
clear()
Removes all toast notifications.
<script setup lang="ts">
const toast = useToast()
function clearAllToasts() {
toast.clear()
}
</script>
toasts
- Type:
Ref<Toast[]>
- Description: A reactive array containing all current toast notifications.