Nuxt 4+ 渐进式开发指南：服务端路由、文件路由、中间件与插件

nuxt by onmax/nuxt-skills

3,400 周安装量

606 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/onmax/nuxt-skills --skill nuxt

开发

🇨🇳中文介绍

Nuxt 4+ 开发

针对 Nuxt 4+ 项目 (v4.3+) 的渐进式指南，涵盖最新模式和规范。

使用时机

适用于以下场景：

服务端路由（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 - 配置、模块、自动导入、层

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

705,000 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

245,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

196,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

128,699 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

关于 Vue 组合式函数： 请查看 vue 技能的 composables.md（VueUse、组合式 API 模式） 关于 UI 组件： 使用 nuxt-ui 技能 关于数据库/存储： 使用 nuxthub 技能 关于内容驱动型网站： 使用 nuxt-content 技能 关于创建模块： 使用 nuxt-modules 技能 关于项目脚手架/CI： 使用 ts-library 技能

请根据你的任务考虑加载以下参考文件：

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/构建工具

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

// server/api/hello.get.ts
import { z } from 'zod'

export default defineEventHandler(async (event) => {
  const { name } = await getValidatedQuery(event, z.object({
    name: z.string().default('world'),
  }).parse)
  return { message: `Hello ${name}` }
})

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 新功能
模块特定的配置
破坏性变更或已弃用的功能
高级用例

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

🇺🇸English

Nuxt 4+ Development

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

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)

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

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.

Quick Start

// server/api/hello.get.ts
import { z } from 'zod'

export default defineEventHandler(async (event) => {
  const { name } = await getValidatedQuery(event, z.object({
    name: z.string().default('world'),
  }).parse)
  return { message: `Hello ${name}` }
})

Nuxt 4 vs Older Versions

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.

Latest Documentation

When to fetch latest docs:

New Nuxt 4 features not covered here
Module-specific configuration
Breaking changes or deprecations
Advanced use cases

Official sources:

Token Efficiency

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

Weekly Installs

3.4K

Repository

onmax/nuxt-skills

GitHub Stars

606

First Seen

Jan 19, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

claude-code2.4K

opencode1.5K

gemini-cli1.5K

github-copilot1.4K

codex1.4K

cursor1.3K