Thiết lập phía máy chủ

Bước đầu khi cài Inertia là cấu hình server-side framework. Inertia duy trì server-side adapter chính thức cho Laravel. Với framework khác, xem community adapters. Inertia được tinh chỉnh chặt cho Laravel, vì vậy ví dụ tài liệu trên website này dùng Laravel. Với ví dụ dùng Inertia cùng server-side framework khác, hãy tham khảo tài liệu riêng do adapter tương ứng duy trì.

Laravel Starter Kit

Các starter kit của Laravel cung cấp scaffold sẵn dùng cho ứng dụng Inertia mới.Đây là cách nhanh nhất để bắt đầu dự án Inertia mới bằng Laravel và Vue hoặc React. Tuy nhiên, nếu muốn cài Inertia thủ công vào ứng dụng, hãy xem tài liệu bên dưới.

Cài đặt

Install dependencies

Trước tiên, hãy cài adapter phía máy chủ của Inertia bằng Composer package manager.

composer require inertiajs/inertia-laravel

Setup root template

Tiếp theo, tạo file resources/views/app.blade.php. Root template này được tải ở lần truy cập page đầu tiên. Inertia cung cấp Blade component để render nội dung head và body.

resources/views/app.blade.php

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @vite('resources/js/app.js')
        <x-inertia::head />
    </head>
    <body>
        <x-inertia::app />
    </body>
</html>

Với ứng dụng React, nên đặt directive @viteReactRefresh trước @vite để bật Fast Refresh trong môi trường phát triển.Component <x-inertia::app> render phần tử <div> với id là app. Element này là mounting point cho JavaScript application. Bạn có thể tùy chỉnh id bằng cách truyền giá trị khác vào component.

<x-inertia::app id="custom-app-id" />

Nếu thay id của root element, hãy nhớ cập nhật cả phía client.Component <x-inertia::head> cũng nhận fallback content qua slot để quản lý head element khi SSR không hoạt động.Mặc định, Laravel adapter của Inertia giả định root template có tên app.blade.php. Bạn có thể thay đổi bằng phương thức Inertia::setRootView().

Tiếp theo, thiết lập Inertia middleware bằng cách publish middleware HandleInertiaRequests vào ứng dụng bằng Artisan command sau.

php artisan inertia:middleware

Sau khi middleware được publish, hãy thêm middleware HandleInertiaRequests vào group middleware web trong file bootstrap/app.php của ứng dụng.

use App\Http\Middleware\HandleInertiaRequests;

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

Middleware này cung cấp phương thức version() để đặt asset version, cùng phương thức share() để định nghĩa shared data.

Create your first response

Vậy là xong, bạn đã sẵn sàng tạo Inertia pages và render chúng qua responses.

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',
            ),
        ]);
    }
}

Blade directives

Trước v3, Inertia dùng Blade directive @inertiaHead và @inertia để render nội dung head và body. Các directive này vẫn được hỗ trợ nhưng không cung cấp fallback content cho SSR head. Các Blade component ở trên được khuyến nghị cho ứng dụng mới.

resources/views/app.blade.php

<html>
    <head>
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

Bạn có thể tùy chỉnh id của root element bằng cách truyền giá trị vào directive: @inertia('custom-app-id').

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v3 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Laravel Starter Kit

Cài đặt

Blade directives

Tài liệu chính thức

Laravel Starter Kit

​Cài đặt

​Blade directives

​Tài liệu chính thức

Cài đặt

Blade directives

Tài liệu chính thức