Nuxt 4+ Development

Nuxt 4+ 开发

Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.

为Nuxt 4+（v4.3+）项目提供符合最新模式与规范的渐进式开发指南。

When to Use

适用场景

Working with:

Server routes (API endpoints, server middleware, server utils)
File-based routing (pages, layouts, route groups)
Nuxt middleware (route guards, navigation)
Nuxt plugins (app extensions)
Nuxt-specific features (auto-imports, layers, modules)

适用于以下开发工作：

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

Available Guidance

可用指南

Read specific files based on current work:

references/server.md - API routes, server middleware, validation (Zod), WebSocket, SSE
references/routing.md - File-based routing, route groups, typed router, definePage
references/middleware-plugins.md - Route middleware, plugins, app lifecycle
references/nuxt-composables.md - Nuxt composables (useRequestURL, useFetch, navigation)
references/nuxt-components.md - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)
references/nuxt-config.md - Configuration, modules, auto-imports, layers

For Vue composables: See

vue

skill composables.md (VueUse, Composition API patterns) For UI components: use

nuxt-ui

skill For database/storage: use

nuxthub

skill For content-driven sites: use

nuxt-content

skill For creating modules: use

nuxt-modules

skill For project scaffolding/CI: use

ts-library

skill

根据当前工作内容阅读对应文件：

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

技能的composables.md（VueUse、组合式API模式） 关于UI组件： 使用

nuxt-ui

技能 关于数据库/存储： 使用

nuxthub

技能 关于内容驱动型站点： 使用

nuxt-content

技能 关于模块开发： 使用

nuxt-modules

技能 关于项目脚手架/CI： 使用

ts-library

技能

Loading Files

文件加载建议

Consider loading these reference files based on your task:

references/server.md - if creating API endpoints or server middleware
references/routing.md - if setting up pages, layouts, or route groups
references/nuxt-composables.md - if using Nuxt composables (useFetch, useRequestURL, etc.)
references/middleware-plugins.md - if working with middleware or plugins
references/nuxt-components.md - if using Nuxt components (NuxtLink, NuxtImg, etc.)
references/nuxt-config.md - if editing nuxt.config.ts
references/project-setup.md - if setting up CI/ESLint/build tools

DO NOT load all files at once. Load only what's relevant to your current task.

根据当前任务考虑加载以下参考文件：

references/server.md - 若正在创建API端点或服务器中间件
references/routing.md - 若正在配置页面、布局或路由组
references/nuxt-composables.md - 若正在使用Nuxt组合式函数（useFetch、useRequestURL等）
references/middleware-plugins.md - 若正在处理中间件或插件
references/nuxt-components.md - 若正在使用Nuxt组件（NuxtLink、NuxtImg等）
references/nuxt-config.md - 若正在编辑nuxt.config.ts
references/project-setup.md - 若正在配置CI/ESLint/构建工具

请勿一次性加载所有文件。 仅加载与当前任务相关的文件。

Nuxt 4 vs Older Versions

Nuxt 4 与旧版本差异

You are working with Nuxt 4+. Key differences:

Old (Nuxt 2/3)	New (Nuxt 4)
`<Nuxt />`	`<NuxtPage />`
`context.params`	`getRouterParam(event, 'name')`
`window.origin`	`useRequestURL().origin`
String routes	Typed router with route names
Separate layouts/	Parent routes with `<slot>`

If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.

你正在使用Nuxt 4+版本。 核心差异如下：

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

若对Nuxt 4的开发模式存疑，请先阅读对应指南文件。

Latest Documentation

Token Efficiency

Token 效率说明

Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.

主技能约占300 Token。每个子文件约占800-1500 Token。仅加载与当前任务相关的文件。

nuxt

Original

Translation