mcpField
N
nuxtjs-vue-typescript

nuxtjs-vue-typescript

github.com/mindrally開発287841 回インストール3 週間前に更新
リポジトリ

nuxtjs-vue-typescript について

TypeScript を使って Nuxt 3 と Vue 3 のアプリを構築するための開発スキルです。コンポーネント構成、UI ライブラリ、データ取得、パフォーマンス、Nuxt 機能の指針をまとめています。

主な機能

  1. 01Composition API と TypeScript のパターン
  2. 02コンポーネントとファイルの整理
  3. 03Shadcn Vue、Radix Vue、Tailwind
  4. 04Nuxt のルーティングとサーバールート
  5. 05データ取得と SEO
  6. 06遅延読み込みとパフォーマンス最適化

活用シーン

  1. 01Nuxt 3 アプリの構成
  2. 02再利用可能な Vue コンポーネントの構築
  3. 03レスポンシブな画面の作成
  4. 04ルート、画像、バンドルの最適化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill nuxtjs-vue-typescript

インストール後、Claude Code で/nuxtjs-vue-typescriptを入力して読み込まれたか確認します。

詳細

NuxtJS Vue TypeScript 開発

TypeScript、Shadcn Vue、Radix Vue、VueUse、Tailwind を使用して Nuxt 3 および Vue 3 アプリケーションを構築するためのガイドラインです。

コードスタイルと構成

  • 簡潔で技術的な TypeScript を、正確な例とともに記述します
  • 宣言的なパターンで Composition API を使用し、Options API は避けます
  • コードの重複より、反復とモジュール化を優先します
  • 補助動詞を使った、説明的な変数名を使用します（isLoading、hasError）
  • ファイルは、エクスポートするコンポーネント、コンポーザブル、ヘルパー、静的コンテンツ、型に整理します
  • コンポーネントの境界を明確にします。コンポーネントが担当する UI／動作は 1 つにし、ロジックが単純なテンプレートとの接着部分を超えて増えたら、コンポーザブルに切り出します

命名規則

  • ディレクトリ：小文字とハイフンを使用します（components/auth-wizard）
  • コンポーネント：PascalCase を使用します（AuthWizard.vue）
  • コンポーザブル：camelCase を使用します（useAuthState.ts）

TypeScript の使用

  • 全体を通して TypeScript を使用します。interface より type を優先しますが、拡張または実装される想定の形状（コンポーネントの props 契約など）には interface を使用します
  • 共有型は、それを所有する機能の近くに置きます。2 つ目の機能で必要になるまでは、共有の types/ ディレクトリに移動しません
  • enum は避け、代わりに const オブジェクトを使用します
  • TypeScript、defineComponent、PropType とともに Vue 3 を活用します

構文とフォーマット

  • メソッドと算出プロパティにはアロー関数を使用します
  • 条件文の波括弧は最小限にします
  • 宣言的なレンダリングにはテンプレート構文を使用します

UI とスタイル設定

  • Shadcn Vue、Radix Vue、Tailwind を実装します
  • モバイルファーストの Tailwind アプローチでレスポンシブに設計します
  • Tailwind の使用は、場当たり的なユーティリティクラスの寄せ集めではなく、アクセシビリティに配慮し、プロジェクトのデザインシステムと一貫性を保ちます

パフォーマンス

  • Nuxt に組み込まれた最適化機能を活用します
  • 非同期コンポーネントには Suspense を使用します
  • ルートとコンポーネントには遅延読み込みを実装します
  • 画像を最適化します：WebP 形式、データサイズ、遅延読み込み
  • 定期的にバンドルサイズを確認し（nuxi analyze）、重く使用頻度の低いコンポーネントには動的な import() を使用します

主な規約

  • よく使うコンポーザブルには VueUse を使用します。リアクティビティを簡潔にできる場合は活用しますが、明示的に把握する必要のある状態遷移を隠すものは避けます
  • 状態管理には Pinia を使用します
  • Web Vitals（LCP、CLS、FID）を最適化します
  • Nuxt の自動インポート機能を使用します

Nuxt 固有のガイドライン

  • Nuxt 3 のディレクトリ構成（pages/、components/、composables/、layouts/、plugins/、server/）に従います
  • 自動インポート、ファイルベースのルーティング、サーバールート、プラグインを活用します
  • ページごとに重複させるのではなく、レイアウト（layouts/default.vue、<NuxtLayout>）を使ってページ共通の外枠を共有します
  • サーバー側エンドポイントには server/api/ ルート（Nitro）を使用し、値をハードコードする代わりに、環境ごとの設定には useRuntimeConfig() を使用します
  • データ取得には useFetch と useAsyncData を使用します
  • useHead と useSeoMeta で SEO を実装します

Vue 3 Composition API のベストプラクティス

  • <script setup> 構文を使用します
  • ref、reactive、computed を活用します
  • 依存性の注入には provide/inject を使用します
  • 再利用可能なロジックにはカスタムコンポーザブルを作成します

コメント

Markdown 対応