项目结构
Nuxt 模板如何组织 app/、server/、shared/ 与 content/ 目录。
模板采用 Nuxt 4 的全栈目录约定:Vue 前端放在 app/,Nitro 后端放在
server/,两端共用的类型和常量放在 shared/,Nuxt Content 的 Markdown
放在 content/。
顶层结构
前端:app/
app/pages 使用文件路由。带括号的路由组只整理代码,不进入 URL:
(marketing)/about.vue 对应 /about,(dashboard)/dashboard.vue 对应
/dashboard。认证、博客与文档页面各自归档在独立目录。
四个布局各有分工:
| 布局 | 用途 |
|---|---|
default.vue | 营销页和普通页面 |
auth.vue | 登录、注册、验证与密码重置 |
docs.vue | 文档侧栏、正文与目录 |
user.vue | 登录后的仪表盘和账户页面 |
app/middleware/auth.ts 与 admin.ts 是客户端路由守卫。页面通过
definePageMeta({ middleware: "auth" }) 或
middleware: ["auth", "admin"] 启用。服务端 API 仍须调用 requireAuth;
客户端守卫改善导航体验,但不是授权边界。
组件按用途分组:ui/ 是 shadcn-vue 基础组件;layout/、docs/、
motion/ 属于模板基础设施;ai/、ai-elements/、dashboard/、email/、
home/ 与 auth/ 组合业务功能。组合式函数、站点配置、语言包、全局 CSS、
插件和前端类型也都位于 app/。
组件自动导入
Nuxt 会自动导入页面、组合式函数与配置过的组件。nuxt.config.ts 中:
components: [
{ path: "~/components/layout", pathPrefix: false },
{ path: "~/components/docs", global: true, pathPrefix: false },
{ path: "~/components/motion", pathPrefix: false },
]pathPrefix: false 避免目录名进入组件名;文档组件还会全局注册,供 Markdown
使用。shadcn 配置则单独指向 app/components/ui 与
app/components/ai-elements,两者都不加前缀。
后端:server/
Nitro 将 server/api 下的文件映射为接口。目录按 Better Auth 通配路由、
user/、admin/、ai/、聊天、支付及回调、存储和联系表单分组。其余后端
模块放在同级目录:
server/middleware/auth.ts注入认证上下文并导出认证辅助函数。server/database/drizzle包含 PostgreSQL 客户端、schema 与服务。server/email、server/payment、server/ai隔离第三方提供商逻辑。server/utils放 Better Auth 等仅服务端配置。
现有接口的认证、校验与响应格式并非完全统一。新增受保护 JSON 接口时,建议
显式调用 requireAuth/getAuthContext,用 Zod 校验输入,并返回稳定的
{ success, data } 结构。
共用代码、内容与别名
shared/ 可被 Vue 与 Nitro 同时引用,适合不依赖浏览器或服务端专有 API 的
类型和配置。content/ 存放按语言拆分的 Nuxt Content 集合;public/ 中的
文件会从站点根路径原样提供。
| 别名 | 指向 | 典型用途 |
|---|---|---|
~ / @ | app/ | 组件、组合式函数、前端配置 |
~~ / @@ | 项目根目录 | 服务端与根级模块 |
#shared | shared/ | 两端共用类型和配置 |
尽量选择能体现归属的最窄别名,例如 @/components/ui/button 表示应用代码,
~~/server/email 表示服务端代码。
