#Laravel + Vue Starter Kit を Docker で検証して改良した fork を公開

公式の laravel/vue-starter-kit（Inertia + Vue 3 + shadcn-vue + Fortify）を Docker で動かし、本番運用に耐える形に書き直したフォークを公開する。テストは 40 passed → 44 passed / 151 assertions。本記事は Vue / Inertia 固有の論点に絞る。

backend 改修（6 件）は React・Vue・Livewire で完全に同一なので pillar に集約した:

→ Laravel スターターキット共通 backend を本番化する 6 つの改修

本記事はその cluster として Vue Starter Kit 固有の話だけを扱う。

#対象の公式サンプル

#検証環境

pillar と共通（Docker Desktop、PHP 8.5.5 / Laravel 13.x / Node 22.22.2）。

git clone https://github.com/codelift-dev/vue-starter-kit.git
cd vue-starter-kit
git checkout improvements
docker compose -f codelift/docker-compose.yml build
docker compose -f codelift/docker-compose.yml run --rm app

#Vue Starter Kit 固有の論点

#A. Wayfinder によるビルド順序の落とし穴

React 版と共通の構造的問題。vite.config.ts に @laravel/vite-plugin-wayfinder が入っているため、composer install 前に npm run build すると Vite ビルド中の php artisan wayfinder:generate 呼び出しが vendor/autoload.php を読めずに落ちる。

require(.../vendor/autoload.php): Failed to open stream: No such file or directory

エラーに composer install の文字が出ないので、初見では Vite / Wayfinder のバグを疑ってしまう。

改修: README に Setup セクションを追加し、composer install → npm run build の順を明示。

#Vue 3 Composition API と Inertia

Vue Starter Kit は Vue 3 を Composition API（<script setup>）で構成している。React 版が JSX + hooks なのに対し、Vue 版は SFC（単一ファイルコンポーネント）+ ref / computed のリアクティビティで書かれる。UI ライブラリも React 版の shadcn/ui に対し shadcn-vue を使う。これらはコンポーネントをコピーして自分のリポジトリに取り込む方式で、npm 依存ではなく resources/js/components/ui 配下に実体が入る。

ただし production hardening の観点では、フロント層のこの違いはほぼ影響しない。Inertia の動作 — サーバーが JSON page object を返し、初回 HTML に初期 props を data-page 属性で埋め込む — は React 版と同一。したがって Content-Security-Policy を厳格化するときの障壁も同じで、'unsafe-inline' を外して nonce 化するには Inertia のレスポンスレンダリングへの改造が要る。

CodeLift の改良版は CSP を導入する（pillar finding D）が 'unsafe-inline' は保守的に残す。nonce 化したい場合、Inertia を使わない Livewire 版なら可能で、その手法は Livewire の CSP nonce 化記事にある。

#J. 設定エンドポイントのレート制限

routes/settings.php で throttle が明示されているのは password 更新ルートのみ。profile update（PATCH）/ destroy（DELETE）は素通し。

Vue 版は React 版と同じく設定変更が HTTP verb で表現されているので、ルート定義に throttle ミドルウェアを足すだけで済む（PATCH に throttle:10,1、DELETE に throttle:3,1）。Livewire 版だけはルーティング形態が違って同じ修正が効かない。

#React 版との関係 — なぜ別記事なのか

Vue 版と React 版は backend が完全に同一、フロント固有の findings（A・J）もほぼ同じ挙動になる。「ほぼ同じ記事を 2 本書いてるだけでは」と思うかもしれないが、理由がある:

• 改良版 fork は 別リポジトリ。Vue を採用したチームに「React 版の diff を見ろ」では取り込めない。Vue fork の commit・テスト結果は独立して記録・公開する必要がある
• 一方、共通 backend の説明を 2 度書くのは無価値 — だから pillar に集約し、本記事は Vue 固有部分に純化した

結果として React 記事と本記事の重複は、共有される finding A・J の最小限の記述だけになっている。

#改良版の commit 構成

improvements ブランチに 8 commits（README Setup〔A〕/ .env〔B〕/ timezone〔C〕/ forceScheme〔E〕/ SetSecurityHeaders〔D〕/ rate limiter〔G〕/ auth log〔I〕/ settings throttle〔J〕）。B・C・D・E・G・I は pillar 記事、A・J は本記事が出典。

テストは公式版 40 passed → 改良版 44 passed / 151 assertions。

#before / after（Vue 固有部分）

共通 backend 6 件の before / after は pillar 記事を参照。

#どのケースで向くか

• laravel/vue-starter-kit をテンプレに本番プロダクトを立ち上げる予定
• React か Vue か検討中 → backend 化コストは同一。フロントの好み・採用市場・shadcn-vue か shadcn/ui かで決めるのが合理的。詳細は3 種比較記事

#再現と取り込み

git clone https://github.com/codelift-dev/vue-starter-kit.git
cd vue-starter-kit
git diff main improvements -- . ':!codelift'

#関連記事

• pillar: Laravel スターターキット共通 backend を本番化する 6 つの改修
• 姉妹 cluster: React 版 / Livewire 版
• 比較: React / Vue / Livewire 比較

#ライセンス

元サンプル / 改良版とも MIT。検証結果は検証日時点のもの。