Nuxt Starter

介绍

模板包含什么,用了哪些技术。

快速上线小型 SaaS 的起步模板,部署在 Cloudflare Workers。

技术栈

部分 用的是
页面 Nuxt 4 + Vue
接口与构建 Nitro(Nuxt 自带)
数据请求 TanStack Vue Query
界面 shadcn-vue + Tailwind CSS 4
数据库 Cloudflare D1 + Drizzle
登录 Better Auth:邮箱密码、邮箱验证、找回密码、Google、Google One Tap
邮件 Resend 托管模板
文档 Markdown,构建时转成静态 HTML

Nitro 是什么

Nuxt 的服务端部分,负责接口、服务端渲染和打包。

  • server/api/ 下的文件就是接口:health.get.ts → GET /api/health。
  • 接口用 defineEventHandler 写,event 里能拿到请求、Cookie 和 D1 等绑定。这一层叫 H3,相当于 Express / Hono。
  • 构建时按预设打包。本模板用 cloudflare_module:.output/server/ 是 Worker 代码,.output/public/ 是静态文件。文档页的预渲染也由它完成。

命令行与 AI 工具

工具 类型 安装 用来做什么
cf Cloudflare CLI npm install -g cf,cf auth login 建 D1、执行正式库迁移、查账号资源
wrangler Cloudflare CLI 项目依赖,npx wrangler login 本地预览、发布 Worker、改线上密钥
cloudflare-deploy Skill Codex 自带;Claude Code 软链接到 ~/.claude/skills/ 让 AI 按 Cloudflare 的产品选择和发布检查清单操作
Resend MCP MCP codex mcp add resend --url https://mcp.resend.com/mcp(Claude Code:claude mcp add --transport http resend https://mcp.resend.com/mcp),浏览器 OAuth 授权 让 AI 管理发件域名、模板,查发送记录
resend、resend-cli、email-best-practices Skill 按 resend.com/setup.md 安装 让 AI 按官方方式写发信代码、用 Resend CLI、处理投递问题

cf 和 wrangler 的登录互不通用,两个都要登。MCP 的 OAuth 授权有删除资源的权限;应用发信只用限制到发件域名的发送 Key。

计划中

后台管理、支付订阅、多语言、GitHub 登录。