nuxt
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseNuxt is a full-stack Vue framework that provides server-side rendering, file-based routing, auto-imports, and a powerful module system. It uses Nitro as its server engine for universal deployment across Node.js, serverless, and edge platforms.
The skill is based on Nuxt 3.x, generated at 2026-01-28.
Nuxt 是一款全栈Vue框架，提供服务端渲染（SSR）、基于文件的路由、自动导入功能以及强大的模块系统。它采用Nitro作为服务端引擎，可在Node.js、无服务器和边缘平台上实现跨平台部署。
本技能基于Nuxt 3.x版本，生成于2026年1月28日。
Core
核心功能
| Topic | Description | Reference |
|---|---|---|
| Directory Structure | Project folder structure, conventions, file organization | core-directory-structure |
| Configuration | nuxt.config.ts, app.config.ts, runtime config, environment variables | core-config |
| CLI Commands | Dev server, build, generate, preview, and utility commands | core-cli |
| Routing | File-based routing, dynamic routes, navigation, middleware, layouts | core-routing |
| Data Fetching | useFetch, useAsyncData, $fetch, caching, refresh | core-data-fetching |
| Modules | Creating and using Nuxt modules, Nuxt Kit utilities | core-modules |
| Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | core-deployment |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 目录结构 | 项目文件夹结构、约定规范、文件组织方式 | core-directory-structure |
| 配置 | nuxt.config.ts、app.config.ts、运行时配置、环境变量 | core-config |
| CLI命令 | 开发服务器、构建、生成、预览及实用工具命令 | core-cli |
| 路由 | 基于文件的路由、动态路由、导航、中间件、布局 | core-routing |
| 数据获取 | useFetch、useAsyncData、$fetch、缓存、刷新 | core-data-fetching |
| 模块 | 创建和使用Nuxt模块、Nuxt Kit工具 | core-modules |
| 部署 | 基于Nitro的跨平台部署、Vercel、Netlify、Cloudflare | core-deployment |
Features
特性
| Topic | Description | Reference |
|---|---|---|
| Composables Auto-imports | Vue APIs, Nuxt composables, custom composables, utilities | features-composables |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | features-components-autoimport |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, ClientOnly, and more | features-components |
| State Management | useState composable, SSR-friendly state, Pinia integration | features-state |
| Server Routes | API routes, server middleware, Nitro server engine | features-server |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 自动导入组合式函数 | Vue API、Nuxt组合式函数、自定义组合式函数、实用工具 | features-composables |
| 自动导入组件 | 组件命名、懒加载、水合策略 | features-components-autoimport |
| 内置组件 | NuxtLink、NuxtPage、NuxtLayout、ClientOnly等 | features-components |
| 状态管理 | useState组合式函数、SSR友好型状态、Pinia集成 | features-state |
| 服务端路由 | API路由、服务端中间件、Nitro服务端引擎 | features-server |
Rendering
渲染
| Topic | Description | Reference |
|---|---|---|
| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | rendering-modes |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 渲染模式 | 通用渲染（SSR）、客户端渲染（SPA）、混合渲染、路由规则 | rendering-modes |
Best Practices
最佳实践
| Topic | Description | Reference |
|---|---|---|
| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | best-practices-data-fetching |
| SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | best-practices-ssr |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 数据获取模式 | 高效获取、缓存、并行请求、错误处理 | best-practices-data-fetching |
| SSR与水合 | 避免上下文泄漏、水合不匹配、组合式函数模式 | best-practices-ssr |
Advanced
进阶内容
| Topic | Description | Reference |
|---|---|---|
| Layers | Extending applications with reusable layers | advanced-layers |
| Lifecycle Hooks | Build-time, runtime, and server hooks | advanced-hooks |
| Module Authoring | Creating publishable Nuxt modules with Nuxt Kit | advanced-module-authoring |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 分层架构 | 通过可复用层扩展应用 | advanced-layers |
| 生命周期钩子 | 构建时、运行时及服务端钩子 | advanced-hooks |
| 模块开发 | 使用Nuxt Kit创建可发布的Nuxt模块 | advanced-module-authoring |