Nuxt 集成
在开始之前，请确保你已经配置好 Better Auth 实例。如果还没有完成，请查看安装指南。
创建 API 路由
我们需要将处理程序挂载到一个 API 路由。在 /server/api/auth 目录下创建一个名为 [...all].ts 的文件，并添加以下代码：
import { auth } from "~/lib/auth"; // 导入你的 auth 配置
export default defineEventHandler((event) => {
return auth.handler(toWebRequest(event));
});你可以在 better-auth 配置中更改路径，但建议保持为 /api/auth/[...all]
迁移数据库
运行以下命令在数据库中创建必要的表：
npx @better-auth/cli migrate创建客户端
创建一个客户端实例。你可以随意命名文件。这里我们在 lib/ 目录下创建 client.ts 文件。
import { createAuthClient } from "better-auth/vue" // 确保从 better-auth/vue 导入
export const authClient = createAuthClient({
// 你可以在这里传递客户端配置
})创建客户端后，你可以使用它来注册、登录和执行其他操作。 其中一些操作是响应式的。
使用示例
<script setup lang="ts">
import { authClient } from "~/lib/client"
const session = authClient.useSession()
</script>
<template>
<div>
<button v-if="!session?.data" @click="() => authClient.signIn.social({
provider: 'github'
})">
使用 GitHub 继续
</button>
<div>
<pre>{{ session.data }}</pre>
<button v-if="session.data" @click="authClient.signOut()">
退出登录
</button>
</div>
</div>
</template>服务端使用
从 auth 实例导出的 api 对象包含所有可在服务器端执行的操作。Better Auth 中的每个端点都可以作为函数调用，包括插件端点。
示例：在服务器 API 路由中获取会话
import { auth } from "~/lib/auth";
export default defineEventHandler((event) => {
const session = await auth.api.getSession({
headers: event.headers
});
if(session) {
// 访问 session.session && session.user
}
});SSR 使用
如果你在使用 Nuxt 并启用 SSR，可以在页面组件的 setup 函数中使用 useSession 函数，并传入 useFetch 使其支持 SSR。
<script setup lang="ts">
import { authClient } from "~/lib/auth-client";
const { data: session } = await authClient.useSession(useFetch);
</script>
<template>
<p>
{{ session }}
</p>
</template>中间件
要为 Nuxt 项目添加中间件，可以使用客户端提供的 useSession 方法。
import { authClient } from "~/lib/auth-client";
export default defineNuxtRouteMiddleware(async (to, from) => {
const { data: session } = await authClient.useSession(useFetch);
if (!session.value) {
if (to.path === "/dashboard") {
return navigateTo("/");
}
}
});资源与示例
- Nuxt 与 Nuxt Hub 示例 在 GitHub 上。
- NuxtZzle 是 Nuxt 和 Drizzle ORM 示例 在 GitHub 上 预览。
- Nuxt 示例 在 StackBlitz 上。
- NuxSaaS (Github) 是一个全栈 SaaS 入门套件，利用 Better Auth 实现安全高效的用户认证。演示
- NuxtOne (Github) 是一个基于 Nuxt 的入门模板，用于构建 AIaaS（AI 即服务）应用程序 预览