jwt-apiリポジトリの front/ ディレクトリ配下にあるNuxt 4フロントエンドアプリケーションでの開発ガイド。Vue 3 / TypeScript / Vuetify 4 / Pinia / Biome / pnpmを使用。認証ミドルウェアチェーン、Piniaストア、useApi composable、i18n対応などフロントエンド作業時に参照する。Nuxt, Vue, Vuetify, Pinia, Biome, pnpm, useApi, silent-refresh-token, authentication middleware などのキーワードで呼び出す。
必ず front/ ディレクトリに移動して作業する。リポジトリルートではなく front/ 配下に pages/, components/, composables/, middleware/, stores/, layouts/, plugins/, server/, utils/, locales/, types/ などが配置されている。
cd front
cd front
pnpm install # 依存パッケージインストール
pnpm dev # 開発サーバー起動（http://localhost:3000）
pnpm build # ビルド
pnpm lint # Lint確認（Biome）
pnpm lint:fix # Lint自動修正
front/middleware/ 配下に以下の順で実行される:
silent-refresh-token - 期限切れトークンの自動リフレッシュ（認証チェック前に実行）authentication - 認証チェック、未認証時はログインへリダイレクトlogged-in-redirect - 認証済みユーザーをログイン/サインアップページからリダイレクトミドルウェアを追加・変更する際はこの実行順序を崩さないこと。
front/composables/useApi.ts はAPIクライアント。401レスポンス時に自動でトークンリフレッシュを試行する。バックエンドと通信する際は生の $fetch ではなくこちらを使用する。
front/stores/ 配下:
| ストア | 役割 |
|---|---|
useAuthStore | トークン・有効期限・JWTペイロード管理 |
useUserStore | ユーザー情報 |
useProjectStore | プロジェクト一覧 |
useToastStore | トースト通知キュー |
useAppStore | ナビゲーション状態（認証失敗時のリダイレクト先記憶） |
X-Requested-With: XMLHttpRequest ヘッダー必須（CSRF対策）credentials: 'include' が必要POST /api/v1/auth_token, POST /api/v1/auth_token/refresh, DELETE /api/v1/auth_tokenfront/biome.jsonc）でリント・フォーマット
front/locales/ で管理コード変更後は以下を実行:
cd front && pnpm lint で静的解析pnpm dev で開発サーバーを起動し、ブラウザで実際に機能を操作して確認3000, API 33000, DB 25432front/.envrc 参照）