关于 nuxt
面向 Nuxt 应用开发的 Nuxt 5.x 技能,为 Agent 提供项目结构、路由、数据获取、服务端功能、渲染和模块开发指南,并涵盖 Nuxt 5 的变化。
主要功能
- 01Nuxt 5 项目结构与配置
- 02路由与类型化数据获取
- 03模块和服务端路由
- 04渲染与部署指南
适用场景
- 01搭建 Nuxt 5 应用
- 02实现路由和数据获取
- 03开发服务端端点或 Nuxt 模块
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ antfu/ skills --skill nuxt安装后在 Claude Code 中输入/nuxt确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/advanced-hooks.mdadvanced-layers.mdadvanced-module-authoring.mdbest-practices-data-fetching.mdbest-practices-ssr.mdcore-cli.mdcore-config.mdcore-data-fetching.mdcore-deployment.mdcore-directory-structure.mdcore-modules.mdcore-routing.mdfeatures-components-autoimport.mdfeatures-components.mdfeatures-composables.mdfeatures-server.mdfeatures-state.mdrendering-modes.md详细介绍
Nuxt 是一个全栈 Vue 框架,提供服务端渲染、基于文件的路由、自动导入和强大的模块系统。它使用 Nitro 作为服务器引擎,可在 Node.js、无服务器和边缘平台上通用部署。
此技能基于 Nuxt 5.x(
5.0.0-0),生成于 2026-09-25。
目录布局: 默认的
srcDir是app/——Vue 应用代码(app.vue、components/、composables/、pages/等)位于app/下,而server/、shared/、public/、modules/、layers/和nuxt.config.ts保留在项目根目录。~/@别名指向app/;使用~~/@@指向根目录。
Nuxt 5 注意事项: Nuxt 5 将许多此前的实验性标志设为默认值。对 Agent 影响最大的变化包括:服务器代码迁移至 Nitro v3(h3 v2、Web 标准
Request/Response),服务器工具从nuxt/server导入且默认不再自动导入,$fetch/useFetch根据生成的路由类型进行类型化,路由默认区分大小写且经过类型化,打包器为 Vite 8(Rolldown)。Nuxt 5 要求 Node22.19/24.11及以上版本。Nitro v2 兼容层(nitroLegacy)可在迁移期间继续构建旧版服务器代码。详情请参阅各个参考文档。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 目录结构 | Nuxt 4 的 app/ srcDir、shared/、别名和约定 | core-directory-structure |
| 配置 | nuxt.config.ts、app.config.ts、别名、Nuxt 5 默认值、移除 jiti、实验性功能 | core-config |
| CLI 命令 | 开发服务器、构建、生成、预览和实用工具命令 | core-cli |
| 路由 | 基于文件的路由、区分大小写且经过类型化的路由、命名视图、布局属性、中间件 | core-routing |
| 数据获取 | useFetch、useAsyncData、$fetch、类型化路由、createUseFetch 工厂、缓存 | core-data-fetching |
| 模块 | 创建和使用 Nuxt 模块、Nuxt Kit 工具 | core-modules |
| 部署 | 使用 Nitro、Vercel、Netlify、Cloudflare 进行平台无关的部署 | core-deployment |
功能
| 主题 | 描述 | 参考 |
|---|---|---|
| Composables 自动导入 | Vue/Nuxt composables、自定义 composables、shared/、useAnnouncer | features-composables |
| 组件自动导入 | 组件命名、延迟加载、水合策略 | features-components-autoimport |
| 内置组件 | NuxtLink、NuxtPage、NuxtLayout、NuxtAnnouncer、ClientOnly 等 | features-components |
| 状态管理 | useState composable、支持 SSR 的状态、Pinia 集成 | features-state |
| 服务端路由 | API 路由、nuxt/server 导入、Nitro v3(h3 v2)、会话、中间件 | features-server |
渲染
| 主题 | 描述 | 参考 |
|---|---|---|
| 渲染模式 | 通用(SSR)、客户端(SPA)、混合渲染、路由规则 | rendering-modes |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| 数据获取模式 | 高效获取、缓存、并行请求、错误处理 | best-practices-data-fetching |
| SSR 与水合 | 避免上下文泄漏、水合不匹配、composable 模式 | best-practices-ssr |
高级
| 主题 | 描述 | 参考 |
|---|---|---|
| 层 | 使用可复用的层扩展应用 | advanced-layers |
| 生命周期钩子 | 构建时、运行时和服务钩子 | advanced-hooks |
| 模块编写 | 使用 Nuxt Kit、带键的组合式函数和依赖项构建可发布的模块 | advanced-module-authoring |