安裝 Inertia 的第一步是設定您的伺服器端框架。Inertia 為 Laravel 維護一個官方的伺服器端適配器。對於其他框架,請參閱 社群適配器.
Inertia 針對 Laravel 進行了微調,因此本網站上的文件範例使用了 Laravel。如需使用其他伺服器端框架的 Inertia 範例,請參閱該適配器維護的特定框架文件。
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'
),
]);
}
}