Files
better-auth/examples/nuxt-example/components/ui/toast/Toaster.vue
2024-09-27 13:36:20 +03:00

38 lines
912 B
Vue

<script setup lang="ts">
import { isVNode } from "vue";
import { useToast } from "./use-toast";
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from ".";
const { toasts } = useToast();
</script>
<template>
<ToastProvider>
<Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
<div class="grid gap-1">
<ToastTitle v-if="toast.title">
{{ toast.title }}
</ToastTitle>
<template v-if="toast.description">
<ToastDescription v-if="isVNode(toast.description)">
<component :is="toast.description" />
</ToastDescription>
<ToastDescription v-else>
{{ toast.description }}
</ToastDescription>
</template>
<ToastClose />
</div>
<component :is="toast.action" />
</Toast>
<ToastViewport />
</ToastProvider>
</template>