本文へ移動
cccskills
無料GitHub で公開

nuxt

Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/plutoスター 4(GitHub 4 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル(8)

  • SKILL.md3.9 KB
  • references/middleware-plugins.md6.0 KB
  • references/nuxt-components.md5.1 KB
  • references/nuxt-composables.md7.5 KB
  • references/nuxt-config.md8.2 KB
  • references/project-setup.md2.5 KB
  • references/routing.md6.1 KB
  • references/server.md10.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Nuxt 4+ Development

Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.

When to Use

Working with:

  • Server routes (API endpoints, server middleware, server utils)
  • File-based routing (pages, layouts, route groups)
  • Nuxt middleware (route guards, navigation)
  • Nuxt plugins (app extensions)
  • Nuxt-specific features (auto-imports, layers, modules)

Available Guidance

Read specific files based on current work:

For Vue composables: See vue skill composables.md (VueUse, Composition API patterns) For UI components: use nuxt-ui skill For database/storage: use nuxthub skill For content-driven sites: use nuxt-content skill For creating modules: use nuxt-modules skill For project scaffolding/CI: use ts-library skill

Loading Files

Consider loading these reference files based on your task:

DO NOT load all files at once. Load only what's relevant to your current task.

Quick Start

// server/api/hello.get.ts
import { z } from 'zod'

export default defineEventHandler(async (event) => {
  const { name } = await getValidatedQuery(event, z.object({
    name: z.string().default('world'),
  }).parse)
  return { message: `Hello ${name}` }
})

Nuxt 4 vs Older Versions

You are working with Nuxt 4+. Key differences:

Old (Nuxt 2/3)New (Nuxt 4)
<Nuxt /><NuxtPage />
context.paramsgetRouterParam(event, 'name')
window.originuseRequestURL().origin
String routesTyped router with route names
Separate layouts/Parent routes with <slot>

If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.

Latest Documentation

When to fetch latest docs:

  • New Nuxt 4 features not covered here
  • Module-specific configuration
  • Breaking changes or deprecations
  • Advanced use cases

Official sources:

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/pluto42026年10月26日 更新

nuxt-ui

無料

Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/pluto42026年10月26日 更新

reka-ui

無料

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/pluto42026年10月26日 更新

vite

無料

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/pluto42026年10月26日 更新

vitest

無料

Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/pluto42026年10月26日 更新

vue

無料

Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance

日本語の概要は準備中です。原文の説明を表示しています。

plutocms/pluto42026年10月26日 更新

plutocms のスキルをすべて見る

このスキルの問題を報告する