关于 arch-nuxt
用于基于 Vitesse 风格模板构建 Nuxt 4 项目的技能集，介绍 Vite 技术栈、应用结构、状态管理、服务端 API 和 PWA 配置。
主要功能
- 01Nuxt 4 模板架构
- 02基于文件的路由与布局
- 03Pinia 和组合式函数模式
- 04服务端 API 设置
- 05PWA 与 UnoCSS 配置
- 06数据获取与色彩模式
适用场景
- 01使用所述技术栈启动 Nuxt 4 应用
- 02实现服务端 API 端点
- 03配置 PWA 功能与样式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/arch-nuxt确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/best-practices-page-meta.mdbest-practices-routing.mdcore-app-structure.mdcore-constants.mdcore-eslint.mdcore-nuxt-config.mdcore-overview.mdcore-scripts.mdfeatures-client-only.mdfeatures-color-mode.mdfeatures-components.mdfeatures-composables.mdfeatures-data-fetching.mdfeatures-layouts.mdfeatures-pinia-state.mdfeatures-pwa.mdfeatures-server-api.mdfeatures-unocss.md详细介绍
arch-nuxt 是 Nuxt 4 的 Vitesse 风格启动模板：SSR、基于文件的路由、自动导入，以及一套有主张的技术栈（Vite、UnoCSS、Pinia、VueUse、ColorMode、VitePWA）。它提供了一套最小化、可用于生产环境的配置：app/ 结构、布局、组合式函数、支持 HMR 的 Pinia store、服务端 API、PWA 配置以及 UnoCSS。优先使用由 Vite 驱动的 Nuxt；不要考虑 webpack 或其他打包工具。
该技能基于 vitesse-nuxt（arch-nuxt 源）生成，生成时间为 2026-01-30。
推荐做法：
- 优先使用由 Vite 驱动的 Nuxt；跳过 webpack 和其他打包工具
- 使用 Pinia 管理全局/客户端状态；在合适时使用
useState管理 SSR 共享状态 - 将 PWA 配置保留在
app/config/pwa.ts中，并在nuxt.config.ts中展开它
核心参考
| 主题 | 说明 | 参考 |
|---|---|---|
| 概览 | 项目用途、结构、技术栈、适用场景 | core-overview |
| Nuxt 配置 | defineNuxtConfig、模块、应用 head、nitro、experimental | core-nuxt-config |
| 应用结构 | app/、app.vue、NuxtLayout、NuxtPage | core-app-structure |
| 脚本 | build、dev、generate、preview、typecheck、dev:pwa | core-scripts |
| 常量 | app/constants、appName、appDescription | core-constants |
| ESLint | @antfu/eslint-config、Nuxt 追加配置 | core-eslint |
功能
| 主题 | 说明 | 参考 |
|---|---|---|
| 布局 | 布局系统、definePageMeta layout | features-layouts |
| 组合式函数 | useCount、useState、自动导入 | features-composables |
| Pinia 状态 | useUserStore、defineStore、HMR | features-pinia-state |
| 服务端 API | defineEventHandler、server/api | features-server-api |
| PWA | VitePWA 配置、manifest、workbox、开发环境 PWA | features-pwa |
| UnoCSS | uno.config.ts、快捷方式、预设、图标 | features-unocss |
| ColorMode | useColorMode、DarkToggle、theme-color meta | features-color-mode |
| 组件 | 自动导入、Counter、Footer、NuxtLink | features-components |
| 仅客户端 | ClientOnly、Suspense、useOnline、fallback | features-client-only |
| 数据获取 | useFetch、useTimeAgo、异步组件数据 | features-data-fetching |
最佳实践
| 主题 | 说明 | 参考 |
|---|---|---|
| 路由 | 基于文件的路由、动态/通配路由 | best-practices-routing |
| 页面元数据 | definePageMeta、布局选择 | best-practices-page-meta |
评论
支持 Markdown