解决shadcn-vue项目中Sonner组件样式异常问题

在shadcn-vue项目中使用Sonner组件时，开发者可能会遇到Toast提示位置异常的问题。本文将深入分析问题原因并提供完整的解决方案。

问题现象

当在Nuxt.js项目中引入Sonner组件作为Toast提示时，Toast会显示在页面底部并占据整个宽度，而不是按照预期位置显示。即使尝试添加relative类也无法解决问题。

根本原因

这个问题源于vue-sonner组件近期发布了v2版本的重大更新。新版本需要额外引入CSS样式文件才能正常工作，否则会导致组件布局异常。

解决方案

针对Nuxt.js项目，有三种方式可以正确引入vue-sonner的样式：

方法一：在app.vue中直接引入

在项目的app.vue文件中，除了引入Toaster组件外，还需要显式引入样式文件：

<script setup>
import { Toaster } from '@/components/ui/sonner';
import 'vue-sonner/style.css'
</script>

方法二：通过nuxt.config.ts配置

在Nuxt配置文件的css选项中添加样式文件路径：

export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css', 'vue-sonner/style.css'],
  // 其他配置...
})

方法三：使用Nuxt模块

安装并配置vue-sonner的Nuxt模块：

export default defineNuxtConfig({
  modules: ['shadcn-nuxt', 'vue-sonner/nuxt'],
  // 其他配置...
})

最佳实践建议

1. 对于新项目，推荐使用方法三的模块方式，它能提供更好的集成体验
2. 现有项目升级时，可以先尝试方法一进行快速修复
3. 确保项目中只使用一种引入方式，避免样式冲突
4. 可以通过Toaster组件的position属性灵活控制Toast显示位置

通过以上方法，开发者可以轻松解决Sonner组件在shadcn-vue项目中的样式异常问题，实现美观且功能完善的Toast提示功能。