jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Nuxt

nuxt

SSRや自動インポート、ファイルベースルーティングを備えたNuxtのフルスタックVueフレームワークで、Nuxtアプリやサーバー経路、データ取得、ミドルウェア、ハイブリッドレンダリングを扱うためのSkill。

⚡ ⏱ テスト計画作成 2時間 → 20分
📜 元の英語説明(参考)

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.

🇯🇵 日本人クリエイター向け解説

一言でいうと

SSRや自動インポート、ファイルベースルーティングを備えたNuxtのフルスタックVueフレームワークで、Nuxtアプリやサーバー経路、データ取得、ミドルウェア、ハイブリッドレンダリングを扱うためのSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
19

💬 こう話しかけるだけ — サンプルプロンプト

  • › Nuxt を使って、最小構成のサンプルコードを示して
  • › Nuxt の主な使い方と注意点を教えて
  • › Nuxt を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

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 3.x, generated at 2026-01-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

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

Rendering

Topic Description Reference
Rendering Modes Universal (SSR), client-side (SPA), hybrid rendering, route rules 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

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

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。