К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

Nuxt — скилл для Claude Code: SSR, маршруты и типизация

Скилл добавляет поддержку Nuxt 5 — полнофункционального Vue-фреймворка с серверным рендерингом, файловой маршрутизацией и автоимпортами. Помогает агенту писать серверные маршруты, работать с useFetch, middleware и гибридным рендерингом.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add antfu/skills --skill nuxt -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/nuxt/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/nuxt/

Из того же набора7

Весь набор →
vitest Anthony Fu Скилл помогает писать тесты на Vitest, настраивать моки и покрытие. Пригодится, когда нужно разобраться с фильтрацией тестов или фикстурами. Claude Code CX Codex Cursor +1 43 600установок vite Anthony Fu Скилл помогает настраивать Vite, писать плагины и собирать SSR-приложения. Пригодится для проектов с vite.config.ts и миграции на Rolldown. Claude Code CX Codex Cursor +1 39 800установок vue Anthony Fu Скилл подсказывает агенту, как писать Vue 3-компоненты через Composition API и script setup. Нужен при работе с Vue SFC и реактивностью. Claude Code CX Codex Cursor +1 35 800установок pnpm Anthony Fu Скилл для работы с pnpm, менеджером пакетов Node.js со строгим разрешением зависимостей. Нужен, если в проекте используются рабочие пространства, каталоги версий, патчи или переопределения зависимостей. Claude Code CX Codex Cursor +1 22 300установок pinia Anthony Fu Скилл Pinia добавляет в Claude Code справку по официальной библиотеке управления состоянием Vue. Помогает при создании хранилищ, работе с состоянием, геттерами и действиями в Vue-приложениях. Claude Code CX Codex Cursor +1 19 700установок unocss Anthony Fu Скилл даёт агенту справочник по UnoCSS: конфиг, правила, шорткаты, пресеты и трансформеры. Пригодится при настройке проекта на UnoCSS или при переносе знаний Tailwind на него. Claude Code CX Codex Cursor +1 16 000установок

Похожие

debug-optimize-lcp ChromeDevTools Разбирает Largest Contentful Paint на четыре последовательных этапа и показывает, где именно тормозит загрузка главного контента страницы. Claude Code CX Codex Cursor +1 3 500установок next-intl-add-language официальный github Добавляет язык в Next.js-приложение с next-intl: переводит en.json и обновляет маршрутизацию. Нужен, когда новая локаль должна появиться в интерфейсе. GitHub Copilot 9 349установок design-mobile-apps designed-by-ai Генерирует экраны мобильных приложений через сервис Sleek и помогает перенести готовый макет в React Native или HTML. Claude Code CX Codex Cursor +1 1 000 000установок mobile-ios-design Seth Hobson Помогает проектировать нативные интерфейсы iOS и писать SwiftUI-вью по Apple HIG. Пригодится для экранов, навигации и адаптивной вёрстки. Claude Code CX Codex Cursor 23 659установок vscode-ext-commands официальный github Скилл подсказывает, как добавлять команды в расширения VS Code: задавать имена, видимость, локализацию и связанные параметры. GitHub Copilot 9 000установок fluentui-blazor официальный github Скилл подсказывает, как подключать Microsoft Fluent UI Blazor и собирать интерфейсы из Fluent-компонентов. Нужен при разработке и отладке Blazor-приложений. GitHub Copilot 9 000установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой