feat!: update to vue-sonner v2 (#1257)

* chore: update `vue-sonner` to v2

* chore(v4): update nuxt.config.ts to add vue-sonner css file

* chore(www): update `vue-sonner` in www, add some docs

Author: sadeghbarati

apps/v4/app.vue

@@ -3,6 +3,7 @@ import { Toaster } from '@/registry/new-york-v4/ui/sonner'
 
 const activeTheme = useCookie<string>('active_theme', { readonly: true })
 const isScaled = computed(() => !!activeTheme.value?.endsWith('-scaled'))
+const colorMode = useColorMode()
 </script>
 
 <template>
@@ -17,6 +18,6 @@ const isScaled = computed(() => !!activeTheme.value?.endsWith('-scaled'))
       <NuxtPage />
     </NuxtLayout>
 
-    <Toaster />
+    <Toaster :theme="colorMode.preference as any || 'system'" />
   </Body>
 </template>

apps/v4/nuxt.config.ts

@@ -4,7 +4,7 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
-  css: ['~/assets/css/main.css'],
+  css: ['~/assets/css/main.css', 'vue-sonner/style.css'],
   modules: ['@nuxtjs/color-mode', '@nuxt/fonts'],
   vite: {
     plugins: [

apps/v4/package.json

@@ -30,7 +30,7 @@
     "vee-validate": "^4.15.0",
     "vue": "^3.5.14",
     "vue-router": "^4.5.1",
-    "vue-sonner": "^1.3.2",
+    "vue-sonner": "^2.0.0",
     "zod": "^3.24.4"
   },
   "devDependencies": {

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -6,12 +6,12 @@ import MoonIcon from '~icons/lucide/moon'
 import SunIcon from '~icons/lucide/sun'
 import Circle from '~icons/radix-icons/circle'
 import File from '~icons/radix-icons/file'
-
 import GithubLogoIcon from '~icons/radix-icons/github-logo'
+
 import { cn } from '@/lib/utils'
 import { Button } from '@/registry/default/ui/button'
-
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/registry/default/ui/command'
+
 import { Dialog, DialogContent } from '@/registry/default/ui/dialog'
 import { Toaster as DefaultToaster } from '@/registry/default/ui/toast'
 import { Toaster as NewYorkSonner } from '@/registry/new-york/ui/sonner'
@@ -21,10 +21,11 @@ import { useConfigStore } from '@/stores/config'
 import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
 import Kbd from '../components/Kbd.vue'
 import Logo from '../components/Logo.vue'
-
 import MobileNav from '../components/MobileNav.vue'
+
 import ThemePopover from '../components/ThemePopover.vue'
 import { docsConfig } from '../config/docs'
+import 'vue-sonner/style.css'
 
 const { radius, theme } = useConfigStore()
 // Whenever the component is mounted, update the document class list

apps/www/package.json

@@ -39,7 +39,7 @@
     "vaul-vue": "^0.4.1",
     "vee-validate": "4.13.2",
     "vue": "^3.5.14",
-    "vue-sonner": "^1.3.2",
+    "vue-sonner": "^2.0.0",
     "vue-wrap-balancer": "^1.2.1",
     "zod": "catalog:"
   },

apps/www/src/content/docs/components/sonner.md

@@ -25,18 +25,22 @@ npx shadcn-vue@latest add sonner
 
 Add the following `Toaster` component to your `App.vue` file:
 
-```vue title="App.vue" {2,6}
+```vue title="App.vue" {2-3,7}
 <script setup lang="ts">
 import { Toaster } from '@/components/ui/sonner'
+import 'vue-sonner/style.css' // vue-sonner v2 requires this import
 </script>
 
 <template>
   <Toaster />
 
-  <!-- Nuxt  -->
+  <!-- Nuxt, vue-sonner v1 because inserting inline CSS with JS to the head tag -->
   <ClientOnly>
     <Toaster />
   </ClientOnly>
+
+  <!-- Nuxt, vue-sonner v2 no need to ClientOnly -->
+  <Toaster />
 </template>
 ```
 
@@ -75,9 +79,10 @@ Related issue https://github.com/unovue/shadcn-vue/issues/462
 
 Add `pointer-events-auto` class to Toaster component in your `App.vue` file:
 
-```vue {6}
+```vue {7}
 <script setup lang="ts">
 import { Toaster } from '@/components/ui/sonner'
+import 'vue-sonner/style.css' // vue-sonner v2 requires this import
 </script>
 
 <template>