> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# 前端

> 在 Laravel 13 中，如何搭配 Blade、Livewire、Inertia、React、Vue、Svelte、SPA、Vite 的入門指南。

## 概觀

Laravel 雖是後端框架，但也非常重視包含前端在內的開發體驗。
在 Laravel 13 中，既提供以 PHP 為主的開發方式，也支援搭配 React、Vue、Svelte 等 JavaScript 框架的開發模式。

要選擇哪種方式，可以從以下 3 點來思考：

* UI 主要想用 **PHP** 撰寫
* UI 主要想用 **JavaScript / TypeScript** 撰寫
* 想在單一 repository 內完成，還是要將 API 與 SPA 分開

```mermaid theme={null}
flowchart TD
    A["Laravel 應用程式"] --> B{"要在哪裡組建 UI？"}
    A --> G["以 Vite 建置資產"]
    B --> C["Blade"]
    B --> D["Livewire + Alpine.js"]
    B --> E["Inertia + React / Vue / Svelte"]
    B --> F["API + 獨立的 SPA"]
    C --> C1["伺服器回傳 HTML"]
    D --> D1["以 PHP 為主打造動態 UI"]
    E --> E1["以單一 repo 提供近似 SPA 的體驗"]
    F --> F1["與獨立前端或行動 App 對接"]
    G --> C1
    G --> D1
    G --> E1
    G --> F1
```

## 以 PHP 為主

### Blade

[Blade](/zh-TW/blade) 是 Laravel 內建的樣板引擎。從控制器或路由回傳視圖，將伺服器產生的 HTML 傳回瀏覽器。

**優點**

* 可與 Laravel 路由、驗證、認證自然整合
* 只用 PHP 就能完成，學習成本低
* 適合注重 SEO 或初次載入速度的頁面

**缺點**

* 每次頁面切換或表單送出常會全頁重繪
* 複雜的互動仍需要 JavaScript 輔助

Blade 適合後台管理、內部工具、內容為主的畫面，或以表單為主的應用程式。

### Livewire

[Laravel Livewire](https://livewire.laravel.com) 以 Blade 為基礎，讓你能以 PHP 為主實作更動態的 UI。像 Modal、搜尋、行內編輯等操作可有近似 React / Vue 的體驗。

**優點**

* 可延續 PHP 與 Blade 打造動態 UI
* 易於與 Laravel 的狀態管理與驗證結合
* 只想在部分位置加入 JavaScript 時，能輕鬆搭配 Alpine.js

**缺點**

* 複雜的用戶端狀態管理仍不如 JavaScript 框架
* 對前端責任極重的大型 SPA 未必合適

<Tip>
  想更了解 Livewire，請參閱 [Livewire 入門](/zh-TW/blog/livewire-introduction)。
</Tip>

### PHP-first 的入門套件

Laravel 13 的[入門套件](/zh-TW/starter-kits)中，為想以 PHP 為主打造**動態 UI** 的團隊準備了 **Livewire** 版本。當然也可以只用 Blade 開始，但作為入門套件供應的 PHP-first 選項是 Livewire。已附帶認證、版型與 Vite 設定等，可以最快速地開始開發。

## 使用 JavaScript 框架

### Inertia + React / Vue / Svelte

[Inertia](https://inertiajs.com) 可以在保留 Laravel 路由、控制器、認證的同時，用 React、Vue、Svelte 建立頁面元件。不必將 API 伺服器與 SPA 完全分離，就能在單一 Laravel 應用程式中打造現代 UI。

**優點**

* 可利用 React / Vue / Svelte 的元件模型
* 路由與認證可保留在 Laravel 端
* 前後端在單一 repo 中易於管理

**缺點**

* 相較純 Blade 需學習的東西更多
* 通常需要 Node.js 工具鏈與 TypeScript 知識

Laravel 13 官方入門套件中，一開始就能選擇 **React / Vue / Svelte + Inertia**。

<Tip>
  詳情可參閱 [Inertia 入門](/zh-TW/blog/inertia-introduction)、[React 入門](/zh-TW/blog/react-introduction)、[Vue 入門](/zh-TW/blog/vue-introduction)、[Svelte 入門](/zh-TW/blog/svelte-introduction)。
</Tip>

### API 與獨立 SPA 分離

也可以將前端與 Laravel 完全分開，由另一個 SPA 或行動 App 使用 API。適合多個用戶端需共享同一後端的情境。

此時 Laravel 主要負責：

* 提供 API 路由
* 認證與授權（如 [Sanctum](/zh-TW/sanctum)）
* JSON 回應格式化（如 [Eloquent API Resources](/zh-TW/eloquent-resources)）

**優點**

* 便於同時展開 Web、行動、桌面等多種用戶端
* 前端技術選型可與 Laravel 本體脫鉤

**缺點**

* 認證、資料抓取、部署都要分別設計
* 相較單一 Laravel 應用程式，架構更為複雜

### JavaScript-first 的入門套件

使用[入門套件](/zh-TW/starter-kits)可以在已整合 Inertia、React / Vue / Svelte、Tailwind CSS 與 Vite 的環境中開始。從一開始就有認證畫面，可讓你更專注於 UI 開發。

## 以 Vite 整合資產

不論選擇哪種方式，Laravel 13 通常使用 [Vite](/zh-TW/vite) 來建置 CSS 與 JavaScript。Blade 或 Livewire 中可以打包輕量的 script 與樣式，Inertia 則會透過 Vite 打包整個前端應用程式的程式碼。

Vite 的優點如下：

* 本機開發時有超快的 HMR
* 正式環境資產的打包與版本管理
* 與 Laravel 的 `@vite()` 指令緊密整合

<Info>
  Laravel 13 的入門套件已預設好以 Vite 為基礎的前端設定。
</Info>

## 各方案比較

| 方案                             | 適用情境                      | 優點                      | 缺點                          |
| ------------------------------ | ------------------------- | ----------------------- | --------------------------- |
| Blade                          | 內容為主的頁面、以表單為主的後台          | 簡單易學，與 Laravel 標準功能自然整合 | 高互動 UI 時全頁重繪較多              |
| Livewire                       | 想以 PHP 為主打造動態 UI 的業務應用    | 可用 PHP 打造反應靈敏的 UI       | 較複雜的用戶端狀態管理稍弱               |
| Inertia + React / Vue / Svelte | 想同時擁有現代 UI 與 Laravel 一體維運 | 在單一 repo 提供 SPA 般體驗     | 需熟悉 JavaScript / TypeScript |
| API + 獨立 SPA                   | 需支援多用戶端或行動裝置              | 前端可獨立部署擴展               | 認證 / 部署 / 維運更複雜             |

## 下一步

<CardGroup cols={2}>
  <Card title="Blade 樣板" icon="file-code-2" href="/zh-TW/blade">
    了解伺服器端渲染的基礎。
  </Card>

  <Card title="入門套件" icon="rocket" href="/zh-TW/starter-kits">
    比較 React、Vue、Svelte、Livewire 的初始設定。
  </Card>

  <Card title="Vite 資產打包" icon="package" href="/zh-TW/vite">
    了解開發伺服器、HMR 與正式建置流程。
  </Card>

  <Card title="Inertia 入門" icon="panels-top-left" href="/zh-TW/blog/inertia-introduction">
    了解 Inertia 如何串連 Laravel 與 JavaScript 框架。
  </Card>
</CardGroup>


## Related topics

- [用 Inertia.js 建構 SPA](/zh-TW/blog/inertia-introduction.md)
- [Laravel 啟動套件的建立方式](/zh-TW/advanced/starter-kit-creation.md)
- [開始學習 Laravel 前需要具備的知識](/zh-TW/true-tutorial.md)
- [以 Vite 進行 asset bundling](/zh-TW/vite.md)
- [安裝](/zh-TW/installation.md)