SKILL.md
readonlyread-only
name
nuxt
description
Nuxt 全端 Vue 框架，支援 SSR、自動匯入與基於檔案的路由。適用於開發 Nuxt 應用程式、伺服器路由、useFetch、中介軟體或混合渲染。
Nuxt 是一個全端 Vue 框架，提供伺服器端渲染、基於檔案的路由、自動匯入以及強大的模組系統。它使用 Nitro 作為伺服器引擎，可通用部署於 Node.js、無伺服器及邊緣平台。
此技能基於 Nuxt 4.x，產生於 2026-06-22。
Nuxt 4 注意： 預設
srcDir為app/— Vue 應用程式碼（app.vue、components/、composables/、pages/等）位於app/下，而server/、shared/、public/、modules/、layers/及nuxt.config.ts則保留在專案根目錄。~/@別名現在指向app/；請使用~~/@@表示根目錄。
核心
| 主題 | 說明 | 參考 |
|---|---|---|
| 目錄結構 | Nuxt 4 app/ srcDir、shared/、別名、慣例 |
core-directory-structure |
| 設定 | nuxt.config.ts、app.config.ts、別名、compatibilityVersion、experimental | 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 路由、伺服器中介軟體、Nitro 伺服器引擎 | features-server |
渲染
| 主題 | 說明 | 參考 |
|---|---|---|
| 渲染模式 | 通用（SSR）、客戶端（SPA）、混合渲染、路由規則 | rendering-modes |
最佳實務
| 主題 | 說明 | 參考 |
|---|---|---|
| 資料擷取模式 | 高效擷取、快取、平行請求、錯誤處理 | best-practices-data-fetching |
| SSR 與水合 | 避免上下文洩漏、水合不匹配、composable 模式 | best-practices-ssr |
進階
| 主題 | 說明 | 參考 |
|---|---|---|
| 層 | 使用可重複使用的層擴展應用程式 | advanced-layers |
| 生命週期鉤子 | 建置時、執行時及伺服器鉤子 | advanced-hooks |
| 模組創作 | 使用 Nuxt Kit 建立可發布的模組、keyed composables、相依性 | advanced-module-authoring |
