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本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nuxt.zip https://jpskill.com/download/5119.zip && unzip -o nuxt.zip && rm nuxt.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5119.zip -OutFile "$d\nuxt.zip"; Expand-Archive "$d\nuxt.zip" -DestinationPath $d -Force; ri "$d\nuxt.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して nuxt.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → nuxt フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .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-18
同梱ファイル
19

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

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

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

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] nuxt Nuxt は、サーバーサイドレンダリング、ファイルベースルーティング、自動インポート、強力なモジュールシステムを提供するフルスタックの Vue フレームワークです。Node.js、サーバーレス、エッジプラットフォーム全体でユニバーサルデプロイメントを実現するために、サーバーエンジンとして Nitro を使用しています。

このスキルは Nuxt 3.x に基づいており、2026-01-28 に生成されました。

コア

トピック 説明 参照
ディレクトリ構造 プロジェクトのフォルダー構造、規約、ファイル構成 core-directory-structure
設定 nuxt.config.ts、app.config.ts、ランタイム設定、環境変数 core-config
CLI コマンド 開発サーバー、ビルド、生成、プレビュー、およびユーティリティコマンド core-cli
ルーティング ファイルベースルーティング、動的ルート、ナビゲーション、ミドルウェア、レイアウト core-routing
データフェッチ useFetch、useAsyncData、$fetch、キャッシング、リフレッシュ core-data-fetching
モジュール Nuxt モジュールの作成と使用、Nuxt Kit ユーティリティ core-modules
デプロイ Nitro、Vercel、Netlify、Cloudflare を使用したプラットフォームに依存しないデプロイ core-deployment

機能

トピック 説明 参照
コンポーザブルの自動インポート Vue API、Nuxt コンポーザブル、カスタムコンポーザブル、ユーティリティ features-composables
コンポーネントの自動インポート コンポーネントの命名、遅延読み込み、ハイドレーション戦略 features-components-autoimport
組み込みコンポーネント NuxtLink、NuxtPage、NuxtLayout、ClientOnly など features-components
状態管理 useState コンポーザブル、SSR フレンドリーな状態、Pinia 統合 features-state
サーバールート API ルート、サーバーミドルウェア、Nitro サーバーエンジン features-server

レンダリング

トピック 説明 参照
レンダリングモード ユニバーサル (SSR)、クライアントサイド (SPA)、ハイブリッドレンダリング、ルートルール rendering-modes

ベストプラクティス

トピック 説明 参照
データフェッチパターン 効率的なフェッチ、キャッシング、並列リクエスト、エラー処理 best-practices-data-fetching
SSR とハイドレーション コンテキストリークの回避、ハイドレーションの不一致、コンポーザブルパターン best-practices-ssr

高度なトピック

トピック 説明 参照
レイヤー 再利用可能なレイヤーによるアプリケーションの拡張 advanced-layers
ライフサイクルフック ビルド時、ランタイム、サーバーフック advanced-hooks
モジュール作成 Nuxt Kit を使用した公開可能な Nuxt モジュールの作成 advanced-module-authoring
📜 原文 SKILL.md(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` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。