项目结构

Nuxt 模板如何组织 app/、server/、shared/ 与 content/ 目录。

模板采用 Nuxt 4 的全栈目录约定:Vue 前端放在 app/,Nitro 后端放在 server/,两端共用的类型和常量放在 shared/,Nuxt Content 的 Markdown 放在 content/

顶层结构

nuxt.config.ts
content.config.ts
components.json

前端:app/

app/pages 使用文件路由。带括号的路由组只整理代码,不进入 URL: (marketing)/about.vue 对应 /about(dashboard)/dashboard.vue 对应 /dashboard。认证、博客与文档页面各自归档在独立目录。

四个布局各有分工:

布局用途
default.vue营销页和普通页面
auth.vue登录、注册、验证与密码重置
docs.vue文档侧栏、正文与目录
user.vue登录后的仪表盘和账户页面

app/middleware/auth.tsadmin.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/uiapp/components/ai-elements,两者都不加前缀。

后端:server/

Nitro 将 server/api 下的文件映射为接口。目录按 Better Auth 通配路由、 user/admin/ai/、聊天、支付及回调、存储和联系表单分组。其余后端 模块放在同级目录:

  • server/middleware/auth.ts 注入认证上下文并导出认证辅助函数。
  • server/database/drizzle 包含 PostgreSQL 客户端、schema 与服务。
  • server/emailserver/paymentserver/ai 隔离第三方提供商逻辑。
  • server/utils 放 Better Auth 等仅服务端配置。

现有接口的认证、校验与响应格式并非完全统一。新增受保护 JSON 接口时,建议 显式调用 requireAuth/getAuthContext,用 Zod 校验输入,并返回稳定的 { success, data } 结构。

共用代码、内容与别名

shared/ 可被 Vue 与 Nitro 同时引用,适合不依赖浏览器或服务端专有 API 的 类型和配置。content/ 存放按语言拆分的 Nuxt Content 集合;public/ 中的 文件会从站点根路径原样提供。

别名指向典型用途
~ / @app/组件、组合式函数、前端配置
~~ / @@项目根目录服务端与根级模块
#sharedshared/两端共用类型和配置

尽量选择能体现归属的最窄别名,例如 @/components/ui/button 表示应用代码, ~~/server/email 表示服务端代码。

相关页面

On this page