New Laravel Project

resources/js/components/ui/sonner/Sonner.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useAppearance } from '@/composables/useAppearance';
+import { Toaster as SonnerPrimitive } from 'vue-sonner';
+import 'vue-sonner/style.css';
+
+const { appearance } = useAppearance();
+</script>
+
+<template>
+    <SonnerPrimitive
+        :theme="appearance"
+        class="toaster group"
+        position="bottom-right"
+        :style="{
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+        }"
+    />
+</template>