feat: Switch toast to vue-sonner instead of NuxtUI

components/content/Contact.vue

@@ -4,8 +4,6 @@ import type { ContactEmail } from '~/types/ContactEmail'
 const appConfig = useAppConfig()
 const { t } = useI18n()
 
-const toast = useToast()
-
 const demandTypes = [
   {
     label: 'contact.subject_types.project',
@@ -66,10 +64,10 @@ async function submitForm() {
     fullname.value = ''
     budget.value = 450
     selected.value = demandTypes[0]
-    toast.add({ title: t('contact.success'), icon: 'i-heroicons-check-circle', timeout: 2500 })
+    toast.success(t('contact.success'))
   }
   else {
-    toast.add({ title: t('contact.error'), icon: 'i-heroicons-x-circle', timeout: 2500, color: 'red' })
+    toast.success(t('contact.error'))
   }
   loading.value = false
 }

layouts/article.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 const { page } = useContent()
 const { t } = useI18n()
-const toast = useToast()
 
 useContentHead(page)
 
@@ -10,15 +9,15 @@ const articleLink = ref(`${runtimeConfig.public.siteUrl}${page.value._path}`)
 
 function copyArticleLink() {
   copyToClipboard(articleLink.value)
-  toast.add({ title: t('global.article_link_copied'), icon: 'i-heroicons-check-circle', timeout: 2500 })
+  toast.success(t('global.article_link_copied'))
 }
 
 defineShortcuts({
   meta_k: {
     usingInput: true,
     handler: () => {
       copyToClipboard(articleLink.value)
-      toast.add({ title: t('global.article_link_copied'), icon: 'i-heroicons-check-circle', timeout: 2500 })
+      toast.success(t('global.article_link_copied'))
     },
   },
 })

nuxt.config.ts

@@ -57,7 +57,7 @@ export default defineNuxtConfig({
     '@nuxthq/studio',
     '@nuxt/image',
     'nuxt-og-image',
-    "@nuxt/fonts"
+    '@nuxt/fonts',
   ],
 
   image: {
@@ -70,6 +70,15 @@ export default defineNuxtConfig({
     },
   },
 
+  imports: {
+    presets: [
+      {
+        from: 'vue-sonner',
+        imports: ['toast'],
+      },
+    ],
+  },
+
   i18n: {
     strategy: 'no_prefix',
     detectBrowserLanguage: {
@@ -113,4 +122,4 @@ export default defineNuxtConfig({
   svgo: {
     autoImportPath: './assets/logo/',
   },
-})
+})

package.json

@@ -34,5 +34,8 @@
     "nuxt-svgo": "^3.7.0",
     "resend": "^0.17.2",
     "sitemap": "^7.1.1"
+  },
+  "dependencies": {
+    "vue-sonner": "^1.1.2"
   }
 }

pages/[...slug].vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { Toaster } from 'vue-sonner'
+
 const runtimeConfig = useRuntimeConfig()
 const appConfig = useAppConfig()
 const { appName, email } = useAppConfig()
-const toast = useToast()
 const { t } = useI18n()
 const { locale } = useI18n()
 
@@ -66,7 +67,7 @@ defineShortcuts({
     usingInput: true,
     handler: () => {
       copyToClipboard(email)
-      toast.add({ title: t('global.email_copied'), icon: 'i-heroicons-check-circle', timeout: 2500 })
+      toast.success(t('global.email_copied'))
     },
   },
 })
@@ -90,7 +91,7 @@ defineShortcuts({
             <ContentRenderer :value="data" />
           </ContentQuery>
         </NuxtLayout>
-        <UNotifications />
+        <Toaster close-button />
         <DotPattern class="absolute inset-0 -z-10 size-full fill-white/5 [mask-image:radial-gradient(white,transparent_85%)]" />
       </Body>
     </Html>