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

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Bước đầu tiên khi cài Inertia là cấu hình framework phía máy chủ. Inertia duy trì adapter phía máy chủ chính thức cho Laravel. Với framework khác, xem community adapter. Inertia được tối ưu chặt chẽ cho Laravel, vì vậy các ví dụ trong tài liệu trên website này sử dụng Laravel. Với ví dụ sử dụng Inertia cùng framework phía máy chủ khác, hãy tham khảo tài liệu riêng của framework 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 trong lần truy cập trang đầu tiên và cần chứa asset cùng các directive @inertia và @inertiaHead.

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')
        @inertiaHead
    </head>
    <body>
        @inertia
    </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.Directive @inertia render phần tử <div> có id là app. Element này làm điểm mount cho ứng dụng JavaScript. Bạn có thể tùy chỉnh id bằng cách truyền giá trị khác vào directive.

<html>
    ...
    <body>
        @inertia('custom-app-id')
    </body>
</html>

Nếu thay đổi id của root element, hãy nhớ cập nhật cả phía client.Mặc định, adapter Laravel của Inertia giả định root template có tên app.blade.php. Nếu muốn dùng root view khác, bạn có thể thay đổi bằng phương thức Inertia::setRootView().

Tiếp theo, chúng ta cần thiết lập middleware Inertia. Bạn có thể thực hiện bằng cách publish middleware HandleInertiaRequests vào ứng dụng thông qua 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 method version() để đặt asset version, cùng method share() để định nghĩa dữ liệu dùng chung.

Create your first response

Vậy là phần phía máy chủ đã sẵn sàng. Giờ bạn có thể bắt đầu tạo trang Inertia và render qua response.

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

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 v2 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

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

Laravel Starter Kit

​Cài đặt

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

Cài đặt

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