Nuxt — скилл для Claude Code: SSR, маршруты и типизация
Скилл добавляет поддержку Nuxt 5 — полнофункционального Vue-фреймворка с серверным рендерингом, файловой маршрутизацией и автоимпортами. Помогает агенту писать серверные маршруты, работать с useFetch, middleware и гибридным рендерингом.
npx skills add antfu/skills --skill nuxt -a claude-codeЧто делает nuxt
Скилл содержит знания о структуре Nuxt-проекта, где код приложения лежит в app/, серверные маршруты — в server/, а конфигурация — в корне. Агент получит доступ к информации о типизированной маршрутизации, автоимпортах компонентов и composables, а также о работе с Nitro v3 — стек для универсального развёртывания на Node.js, serverless и edge.
Скилл основан на Nuxt 5.x и охватывает ключевые области: конфигурация (nuxt.config.ts), данные (useFetch, useAsyncData, $fetch), состояние через useState, серверные маршруты с поддержкой сессий и middleware. Включает рекомендации по SSR и гидратации, паттернам загрузки данных, слоям и написанию модулей.
Требует Node.js 22.19 или выше. Если в проекте старая версия Nuxt, используется слой совместимости nitroLegacy для постепенной миграции серверного кода.
Какие задачи решает
- Настроить файловую маршрутизацию и типизированные маршруты в Nuxt
- Написать серверные API через Nitro v3 с sessons и middleware
- Организовать загрузку данных с useFetch и кешированием
- Настроить гибридный рендеринг и route rules
- Структурировать проект: srcDir, composables, компоненты, aliases
Примеры запросов агенту
- Помоги создать API маршрут в `server/api/users.ts` с валидацией и сессией
- Как правильно загружать данные в Nuxt с useFetch, чтобы избежать двойной загрузки на сервере и клиенте
- Объясни, как настроить гибридный рендеринг для отдельных страниц
Как установить nuxt
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill nuxt -a claude-code2Вручную: положить файлы
~/.claude/skills/nuxt/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/nuxt/
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill nuxt -a codex2Вручную: положить файлы
.agents/skills/nuxt/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill nuxt -a cursor2Вручную: положить файлы
.cursor/skills/nuxt/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install antfu/skills nuxt2Вручную: положить файлы
.github/skills/nuxt/SKILL.md1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill nuxt -a gemini-cli2Командой платформы
gemini skills install https://github.com/antfu/skills --path skills/nuxtВручную: положить файлы
.devin/skills/nuxt/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add antfu/skills --skill nuxt -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора7
Весь набор →Похожие
Вопросы о nuxt
Как установить скилл nuxt в Claude Code?
Запусти npx skills add antfu/skills --skill nuxt -a claude-code. После этого агент найдёт информацию в ~/.claude/skills/nuxt/SKILL.md.
Что делает скилл nuxt?
Дополняет агента знаниями о структуре Nuxt-проектов, маршрутизации, серверных маршрутах через Nitro, загрузке данных и гибридном рендеринге. Помогает писать код для Nuxt 5.x без ошибок совместимости.
Какая версия Node.js требуется для Nuxt 5?
Требуется Node.js 22.19 или 24.11 и выше.
Исходный текст
SKILL.md · MIT
--- name: nuxt description: Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering. metadata: author: Anthony Fu version: "2026.9.25" source: Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills --- Nuxt 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 5.x (`5.0.0-0`), generated at 2026-09-25. > **Directory layout:** the default `srcDir` is `app/` — Vue app code (`app.vue`, `components/`, `composables/`, `pages/`, etc.) lives under `app/`, while `server/`, `shared/`, `public/`, `modules/`, `layers/` and `nuxt.config.ts` stay at the project root. The `~`/`@` aliases point at `app/`; use `~~`/`@@` for the root. > **Nuxt 5 note:** Nuxt 5 makes many former experimental flags the default. The biggest shifts for agents: server code moves to **Nitro v3** (h3 v2, Web-standard `Request`/`Response`), server utilities import from **`nuxt/server`** and are no longer auto-imported by default, `$fetch`/`useFetch` are **typed from generated route types**, routing is **case-sensitive** and **typed** by default, and the bundler is **Vite 8 (Rolldown)**. Nuxt 5 requires Node `22.19`/`24.11`+. A Nitro v2 compatibility layer (`nitroLegacy`) keeps older server code building during migration. See individual references for details. ## Core | Topic | Description | Reference | |-------|-------------|-----------| | Directory Structure | Nuxt 4 `app/` srcDir, `shared/`, aliases, conventions | [core-directory-structure](references/core-directory-structure.md) | | Configuration | nuxt.config.ts, app.config.ts, aliases, Nuxt 5 defaults, jiti removal, experimental | [core-config](references/core-config.md) | | CLI Commands | Dev server, build, generate, preview, and utility commands | [core-cli](references/core-cli.md) | | Routing | File-based routing, case-sensitive + typed routes, named views, layout props, middleware | [core-routing](references/core-routing.md) | | Data Fetching | useFetch, useAsyncData, $fetch, typed routes, createUseFetch factories, caching | [core-data-fetching](references/core-data-fetching.md) | | Modules | Creating and using Nuxt modules, Nuxt Kit utilities | [core-modules](references/core-modules.md) | | Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | [core-deployment](references/core-deployment.md) | ## Features | Topic | Description | Reference | |-------|-------------|-----------| | Composables Auto-imports | Vue/Nuxt composables, custom composables, `shared/`, useAnnouncer | [features-composables](references/features-composables.md) | | Components Auto-imports | Component naming, lazy loading, hydration strategies | [features-components-autoimport](references/features-components-autoimport.md) | | Built-in Components | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more | [features-components](references/features-components.md) | | State Management | useState composable, SSR-friendly state, Pinia integration | [features-state](references/features-state.md) | | Server Routes | API routes, `nuxt/server` imports, Nitro v3 (h3 v2), sessions, middleware | [features-server](references/features-server.md) | ## Rendering | Topic | Description | Reference | |-------|-------------|-----------| | Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | [rendering-modes](references/rendering-modes.md) | ## Best Practices | Topic | Description | Reference | |-------|-------------|-----------| | Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | [best-practices-data-fetching](references/best-practices-data-fetching.md) | | SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | [best-practices-ssr](references/best-practices-ssr.md) | ## Advanced | Topic | Description | Reference | |-------|-------------|-----------| | Layers | Extending applications with reusable layers | [advanced-layers](references/advanced-layers.md) | | Lifecycle Hooks | Build-time, runtime, and server hooks | [advanced-hooks](references/advanced-hooks.md) | | Module Authoring | Publishable modules with Nuxt Kit, keyed composables, dependencies | [advanced-module-authoring](references/advanced-module-authoring.md) |
© Anthony Fu · MIT · antfu/skills