概觀
Laravel 雖是後端框架，但也非常重視包含前端在內的開發體驗。 在 Laravel 13 中，既提供以 PHP 為主的開發方式，也支援搭配 React、Vue、Svelte 等 JavaScript 框架的開發模式。 要選擇哪種方式，可以從以下 3 點來思考：- UI 主要想用 PHP 撰寫
- UI 主要想用 JavaScript / TypeScript 撰寫
- 想在單一 repository 內完成，還是要將 API 與 SPA 分開
以 PHP 為主
Blade
Blade 是 Laravel 內建的樣板引擎。從控制器或路由回傳視圖，將伺服器產生的 HTML 傳回瀏覽器。 優點- 可與 Laravel 路由、驗證、認證自然整合
- 只用 PHP 就能完成，學習成本低
- 適合注重 SEO 或初次載入速度的頁面
- 每次頁面切換或表單送出常會全頁重繪
- 複雜的互動仍需要 JavaScript 輔助
Livewire
Laravel Livewire 以 Blade 為基礎，讓你能以 PHP 為主實作更動態的 UI。像 Modal、搜尋、行內編輯等操作可有近似 React / Vue 的體驗。 優點- 可延續 PHP 與 Blade 打造動態 UI
- 易於與 Laravel 的狀態管理與驗證結合
- 只想在部分位置加入 JavaScript 時，能輕鬆搭配 Alpine.js
- 複雜的用戶端狀態管理仍不如 JavaScript 框架
- 對前端責任極重的大型 SPA 未必合適
PHP-first 的入門套件
Laravel 13 的入門套件中，為想以 PHP 為主打造動態 UI 的團隊準備了 Livewire 版本。當然也可以只用 Blade 開始，但作為入門套件供應的 PHP-first 選項是 Livewire。已附帶認證、版型與 Vite 設定等，可以最快速地開始開發。使用 JavaScript 框架
Inertia + React / Vue / Svelte
Inertia 可以在保留 Laravel 路由、控制器、認證的同時，用 React、Vue、Svelte 建立頁面元件。不必將 API 伺服器與 SPA 完全分離，就能在單一 Laravel 應用程式中打造現代 UI。 優點- 可利用 React / Vue / Svelte 的元件模型
- 路由與認證可保留在 Laravel 端
- 前後端在單一 repo 中易於管理
- 相較純 Blade 需學習的東西更多
- 通常需要 Node.js 工具鏈與 TypeScript 知識
API 與獨立 SPA 分離
也可以將前端與 Laravel 完全分開，由另一個 SPA 或行動 App 使用 API。適合多個用戶端需共享同一後端的情境。 此時 Laravel 主要負責：- 提供 API 路由
- 認證與授權（如 Sanctum）
- JSON 回應格式化（如 Eloquent API Resources）
- 便於同時展開 Web、行動、桌面等多種用戶端
- 前端技術選型可與 Laravel 本體脫鉤
- 認證、資料抓取、部署都要分別設計
- 相較單一 Laravel 應用程式，架構更為複雜
JavaScript-first 的入門套件
使用入門套件可以在已整合 Inertia、React / Vue / Svelte、Tailwind CSS 與 Vite 的環境中開始。從一開始就有認證畫面，可讓你更專注於 UI 開發。以 Vite 整合資產
不論選擇哪種方式，Laravel 13 通常使用 Vite 來建置 CSS 與 JavaScript。Blade 或 Livewire 中可以打包輕量的 script 與樣式，Inertia 則會透過 Vite 打包整個前端應用程式的程式碼。 Vite 的優點如下：- 本機開發時有超快的 HMR
- 正式環境資產的打包與版本管理
- 與 Laravel 的
@vite()指令緊密整合
Laravel 13 的入門套件已預設好以 Vite 為基礎的前端設定。
各方案比較
下一步
Blade 樣板
了解伺服器端渲染的基礎。
入門套件
比較 React、Vue、Svelte、Livewire 的初始設定。
Vite 資產打包
了解開發伺服器、HMR 與正式建置流程。
Inertia 入門
了解 Inertia 如何串連 Laravel 與 JavaScript 框架。