Thiết lập phía client

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Sau khi đã cấu hình framework phía máy chủ, bước tiếp theo là thiết lập framework phía client. Hiện Inertia hỗ trợ React, Vue và Svelte.

Laravel Starter Kit

Các starter kit của Laravel, Breeze và Jetstream, cung cấp sẵn scaffold cho ứng dụng Inertia mới. Đây là cách nhanh nhất để bắt đầu xây dựng dự án Inertia mới bằng Laravel cùng 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 dependency

Trước tiên, hãy cài adapter phía client của Inertia tương ứng với framework bạn lựa chọn.

npm install @inertiajs/vue2

npm install @inertiajs/vue3

npm install @inertiajs/react

npm install @inertiajs/svelte

Khởi tạo ứng dụng Inertia

Tiếp theo, cập nhật file JavaScript chính để khởi động ứng dụng Inertia. Để làm việc này, chúng ta sẽ khởi tạo framework phía client với component Inertia cơ sở.

import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/vue2'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        Vue.use(plugin)

        new Vue({
            render: h => h(App, props),
        }).$mount(el)
    },
})

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
    },
})

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
        return pages[`./Pages/${name}.svelte`]
    },
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

Callback setup nhận mọi thứ cần thiết để khởi tạo framework phía client, bao gồm root component App của Inertia.

Resolve component

Callback resolve cho Inertia biết cách tải một page component. Nó nhận tên trang (chuỗi) và trả về module page component. Cách triển khai callback này phụ thuộc vào bundler bạn đang sử dụng (Vite hoặc Webpack).

// Vite
resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
},

// Webpack
resolve: name => require(`./Pages/${name}`),

// Vite
resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
},

// Webpack
resolve: name => require(`./Pages/${name}`),

// Vite
resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
},

// Webpack
resolve: name => require(`./Pages/${name}`),

// Vite
resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
},

// Webpack
resolve: name => require(`./Pages/${name}.svelte`),

Mặc định, chúng tôi khuyến nghị eager load các component, kết quả là một JavaScript bundle duy nhất. Tuy nhiên, nếu muốn lazy-load component, hãy xem tài liệu code splitting.

Định nghĩa root element

Mặc định, Inertia giả định root template của ứng dụng có root element với id là app. Nếu root element của ứng dụng có id khác, bạn có thể cung cấp nó bằng thuộc tính id.

createInertiaApp({
id: 'my-app',
// ...
})

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

Nâng cao

Laravel Starter Kit

Cài đặt dependency

Khởi tạo ứng dụng Inertia

Resolve component

Định nghĩa root element

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

​Laravel Starter Kit

​Cài đặt dependency

​Khởi tạo ứng dụng Inertia

​Resolve component

​Định nghĩa root element

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

Laravel Starter Kit

Cài đặt dependency

Khởi tạo ứng dụng Inertia

Resolve component

Định nghĩa root element

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