{} CodeLift
Comparison

Laravel starter kits compared: React vs Vue vs Livewire

Measured production-hardening cost for the three official Laravel starter kits — React, Vue, and Livewire — based on CodeLift's Docker-verified forks.

Published 2026-04-19 Updated 2026-04-19

Items compared

Why compare

Laravel ships three official starter kits (React, Vue, Livewire) and they all sit on the same backend skeleton. Choosing between them looks like a frontend decision, but from a production-hardening standpoint each kit requires a slightly different amount of additional work before shipping. This page collects the numbers and findings from CodeLift's Docker-verified forks of all three, measured on 2026-04-19.

Stack at a glance

Dimension React Vue Livewire
Frontend React 19 + Inertia Vue 3 + Inertia Livewire v4 + Flux + Alpine
UI library shadcn/ui shadcn-vue Flux UI
Typing TypeScript TypeScript (server-side PHP)
Vite plugin @laravel/vite-plugin-wayfinder @laravel/vite-plugin-wayfinder
Initial state wiring Inertia serializes into inline <script> Same as React wire:* attributes on HTML — no inline script
Default web middleware 3 Inertia-related middlewares appended Same as React Empty (nothing appended)

Hardening cost (measured on CodeLift's improved forks)

Metric React Vue Livewire
Upstream tests 40 passed (136 assertions) 40 passed (136 assertions) 33 passed (77 assertions)
Improved-fork tests 44 passed (151 assertions) 44 passed (151 assertions) 37 passed (92 assertions)
Improvement commits 8 8 7
Drop CSP 'unsafe-inline' Requires patching Inertia response Same as React Feasible — done on csp-nonce branch
Settings endpoint throttle Drop in at Route::patch/delete Same as React Needs per-component RateLimiter inside Livewire actions

Findings applied, side-by-side

Finding React Vue Livewire
A. Opaque build error when composer install skipped ✅ README update ✅ README update ⚠ Not an issue (no wayfinder) but Setup section added
B. .env.example missing production hints
C. Hardcoded timezone in config/app.php
D. No security response headers ✅ (appended after Inertia middlewares) ✅ (first middleware in an empty stack)
E. No URL::forceScheme('https')
F. Password rules ⊘ already handled upstream ⊘ same ⊘ same
G. Single-layer login throttle ✅ two-layer ✅ two-layer ✅ two-layer
H. 2FA policy enforcement ⊘ design decision ⊘ same ⊘ same
I. Auth log channel separation auth channel + subscriber
J. Settings endpoint throttle gaps throttle:10,1 + throttle:3,1 ✅ same ⚠ deferred — shape differs under Route::livewire

Choosing between them

You want a TypeScript SPA feel → React or Vue Backend hardening cost is identical between React and Vue. Choose on UI library (shadcn/ui vs shadcn-vue), team skill, and existing assets.

You want PHP all the way down / Blade-centric → Livewire Base hardening cost is similar, but Livewire has the edge if you plan to tighten CSP hard — no inline initial state means you can drop 'unsafe-inline' with one commit. Component-level rate limiting has to live inside Livewire actions, which costs more later.

Strong audit / compliance requirements Livewire → CSP nonce article shows the tightest policy achievable today without framework patches. React/Vue can match it only by patching HandleInertiaRequests or moving to Inertia SSR.

CodeLift's one-pass effort estimate

React Vue Livewire
Base hardening (7-8 findings) ~1 day ~1 day (full reuse from React) ~1 day
CSP nonce migration (drop 'unsafe-inline') Medium — Inertia patch needed Medium Small — done on a dedicated branch
Livewire component rate limiting n/a n/a Medium — per-component work

Related reading