{} CodeLift
Comparison

Laravel Starter Kits: 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-08-12

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 emits a <script type="application/json"> data block (never executed, so outside CSP's scope) Same as React wire:* attributes on HTML
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' Feasible — done Feasible — same procedure as React Feasible — done
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. This page originally claimed Livewire had the edge on tightening CSP; verification showed the Inertia kits go nonce-based just as easily, so CSP is not a deciding factor. Component-level rate limiting does still have to live inside Livewire actions, which remains a Livewire-specific cost.

Strong audit / compliance requirements All three reach a nonce-based CSP with 'unsafe-inline' removed, and none of them require patching the framework.

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') Small — done Small — same as React Small — done
Livewire component rate limiting n/a n/a Medium — per-component work

Related reading