nuxt

Nuxt 4+ 开发

为 Nuxt 4+ 项目提供渐进式指导，采用最新模式和约定。

适用场景

适用于以下工作：

• 服务端路由（API 端点、服务端中间件、服务端工具函数）
• 基于文件的路由（页面、布局、路由组）
• Nuxt 中间件（路由守卫、导航）
• Nuxt 插件（应用扩展）
• Nuxt 专属功能（自动导入、层、模块）

可用指导

根据当前工作阅读相应文件：

• references/server.md - API 路由、服务端中间件、验证（Zod）、WebSocket、SSE
• references/routing.md - 基于文件的路由、路由组、类型化路由器、definePage
• references/middleware-plugins.md - 路由中间件、插件、应用生命周期
• references/nuxt-composables.md - Nuxt 组合式函数（useRequestURL、useFetch、导航）
• references/nuxt-components.md - NuxtLink、NuxtImg、NuxtTime（优先于 HTML 元素）
• references/nuxt-config.md - 配置、模块、自动导入、层

**Vue 组合式函数：**参见 vue skill 的 composables.md（VueUse、Composition API 模式） **UI 组件：**使用 nuxt-ui skill **数据库/存储：**使用 nuxthub skill **内容驱动型网站：**使用 nuxt-content skill **创建模块：**使用 nuxt-modules skill **项目脚手架/CI：**使用 personal-ts-setup skill

使用模式

渐进式加载——只阅读所需内容：

• 创建 API 端点？→ references/server.md
• 设置页面/路由？→ references/routing.md
• 使用组合式函数/获取数据？→ references/nuxt-composables.md
• 添加中间件/插件？→ references/middleware-plugins.md
• 配置 Nuxt？→ references/nuxt-config.md
• 设置 CI/ESLint？→ references/project-setup.md

**不要一次性阅读所有文件。**根据上下文加载：

• 在 server/ 中工作 → 阅读 server.md
• 在 pages/ 或 layouts/ 中工作 → 阅读 routing.md
• 使用 useFetch、useRequestURL、导航 → 阅读 nuxt-composables.md
• 使用 <a>、<img>、<time> 元素 → 阅读 nuxt-components.md
• 在 middleware/ 或 plugins/ 中工作 → 阅读 middleware-plugins.md
• 编辑 nuxt.config.ts → 阅读 nuxt-config.md

Nuxt 4 与旧版本的区别

**你正在使用 Nuxt 4+。**主要区别：

旧版（Nuxt 2/3）	新版（Nuxt 4）
<Nuxt />	<NuxtPage />
context.params	getRouterParam(event, 'name')
window.origin	useRequestURL().origin
字符串路由	带路由名称的类型化路由器
分离的布局/	带 <slot> 的父级路由

如果不确定 Nuxt 4 的模式，请先阅读相关指导文件。

最新文档

获取最新文档的时机：

• 此处未涵盖的 Nuxt 4 新功能
• 特定模块的配置
• 重大变更或弃用内容
• 高级用例

官方来源：

• Nuxt：https://nuxt.com/docs
• h3（服务端引擎）：https://v1.h3.dev/
• Nitro：https://nitro.build/

Token 效率

主 skill：约 300 个 token。每个子文件：约 800–1500 个 token。只加载与当前任务相关的文件。