伺服器端設定

安裝 Inertia 的第一步是設定您的伺服器端框架。Inertia 為 Laravel 維護一個官方的伺服器端適配器。對於其他框架,請參閱 社群適配器.

Inertia 針對 Laravel 進行了微調,因此本網站上的文件範例使用了 Laravel。如需使用其他伺服器端框架的 Inertia 範例,請參閱該適配器維護的特定框架文件。

Laravel 入門套件

Laravel 的 入門套件 Breeze 和 Jetstream,為新的 Inertia 應用程式提供了開箱即用的 scaffolding。這些入門套件是使用 Laravel 和 Vue 或 React 開始建構新的 Inertia 專案的最快方式。但是,如果您想將 Inertia 手動安裝到您的應用程式中,請參考以下文件。

安裝依賴項

首先,使用 Composer 套件管理器安裝 Inertia 伺服器端適配器。

composer require inertiajs/inertia-laravel

根範本

接下來,設定在第一次造訪應用程式時將載入的根範本。這將用於載入您的網站資源(CSS 和 JavaScript),並且還將包含一個根 <div>,在其中啟動您的 JavaScript 應用程式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

此範本應包含您的資源,以及 @inertia@inertiaHead指令。

預設情況下,Inertia 的 Laravel 適配器會假設您的根範本名為 app.blade.php。如果您想使用不同的根視圖,您可以使用 Inertia::setRootView() 方法進行變更。

中介層

接下來,我們需要設定 Inertia 中介層。您可以透過發佈 HandleInertiaRequests 中介層到您的應用程式來完成此操作,這可以使用以下 Artisan 命令來完成。

php artisan inertia:middleware

發佈中介層後,將 HandleInertiaRequests 中介層附加到您的應用程式 bootstrap/app.php 檔案中的 web 中介層群組。

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

此中介層提供一個 version() 方法,用於設定您的 資源版本,以及一個 share() 方法,用於定義 共用資料.

建立回應

就這樣,您的伺服器端已準備就緒!現在您已準備好開始建立 Inertia 頁面並透過 回應 呈現它們。

use Inertia\Inertia;

class EventsController extends Controller
{
    public function show(Event $event)
    {
        return Inertia::render('Event/Show', [
            'event' => $event->only(
                'id',
                'title',
                'start_date',
                'description'
            ),
        ]);
    }
}