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 - 設定、模組、自動匯入、層

關於 Vue 組合式函式： 請參閱 vue 技能的 composables.md（VueUse、Composition 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 功能
• 模組特定設定
• 重大變更或棄用項目
• 進階使用案例

官方來源：

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

Token 效率

主要技能：約 300 tokens。每個子檔案：約 800-1500 tokens。僅載入與當前任務相關的檔案。