前言
很久之前，由于 Vuetify 没有全局消息通知组件，所以基于 v-alert 自己封装了一个简单的 全局消息通知工具，有人一直诟病说没有全局确认框组件，最近终于抽空基于v-dialog也简单封装了一下，够用。
下面直接上代码，有不明白的欢迎评论交流。
代码组成
提示：下面代码基于 Vue3 + Nuxt3，所以很多资源不需要手动引入，如 ref 等，如果你在非 Nuxt3 环境使用，请手动调试修改代码，相信这难不住你对吧~
问题介绍
使用 Tailwindcss 开发项目时，如果项目还是用了其他的 UI组件库，则有可能会出现 class冲突的问题，尤其是一些海外的开源UI组件库，大多会有与 Tailwindcss 语法相同 class 定义，这时如果他们的 class 样式定义不同，则可能会产生冲突问题。
比如老狗最近使用 Tailwindcss + Vuetify 开发项目时，就出现了一些冲突问题。
一个简单的冲突问题举例：
这个冲突简单来讲就是：
Vuetify的样式中存在!important导致正常的Tailwindcss失效。详细内容请看下面。
同名 class 如下：
css/* tailwindcss */
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
/* Vuetify */
.px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
如上代码可以发现，其实这两个框架定义的样式时一样的，唯一的区别是 Vuetify 中使用了 !important，而问题就出在 !important 上。
现在很多web页面都需要考虑响应式布局，使用 tailwindcss 时，一般我们使用标识来定义响应式样式，如md/lg等，比如下面的实例代码。
html<button class="px-4 md:px-2">立即开始</button>
由于 Vuetify 的 px-4 存在 !important，导致 tailwindcss 的 md:px-2 失去了效果，这就导致页面没有显示出想要的效果。
【编程技术】你还在手写各种第三方授权登录吗？来学学NuxtAuth吧（基于Nuxt3）
在如今的互联网应用中，用户身份验证几乎是每个项目不可或缺的一部分。尤其是当应用需要整合外部服务时，第三方授权登录成为了一种常见的做法。然而，很多开发者仍然手动实现各种第三方登录功能，既费时又容易出错。为了简化这个过程，@sidebase/nuxt-auth 提供了一个强大且易于集成的解决方案，让你无需再手动编写每个服务的授权代码。
本文将带你了解为什么你应该使用 @sidebase/nuxt-auth，如何通过它实现第三方授权登录，并探讨它的优点。
简介
@sidebase/nuxt-auth 是一个搭配 Nuxt3 使用的项目鉴权插件，其功能是基于 【Authjs】实现的，因此很多配置项与 Authjs相同。
ps: Authjs支持的功能比较多，所以一般都采用
Authjs方案，但@sidebase/nuxt-auth
问题
在使用 @sidebase/nuxt-auth 时，需要配置一些基本配置项，可以参考官方文档：https://auth.sidebase.io/guide/authjs/quick-start
其中基础配置项为：
tsexport default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
provider: {
type: 'authjs',
trustHost: false,
defaultProvider: 'github',
addDefaultCallbackUrl: true
}
}
})
配置上述内容后，即需要根据 @sidebase/nuxt-auth 官方文档编写登录接口，具体内容再次不赘述，有需要可自行查阅。
之后就可以正常启动测试，但是启动时大概率会报错：
ℹ AUTH_NO_ORIGIN: No origin - this is an error in production, see https://sidebase.io/nuxt-auth/resources/errors. You can ignore this during development
根据这个错误信息可以知道，开发环境可以忽略这个错误，但是如果你看到这里就不管了，生产环境不做处理必然会报错，那么如何解决呢？
