> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Thiết lập phía client

<Warning>Đâ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](/v3/getting-started/index).</Warning>

Sau khi đã [cấu hình framework phía máy chủ](/v1/installation/server-side-setup), 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](https://laravel.com/docs/starter-kits) 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.

<CodeGroup>
  ```bash Vue 2 theme={null}
  npm install @inertiajs/vue2
  ```

  ```bash Vue 3 theme={null}
  npm install @inertiajs/vue3
  ```

  ```bash React icon="react" theme={null}
  npm install @inertiajs/react
  ```

  ```bash Svelte icon="s" theme={null}
  npm install @inertiajs/svelte
  ```
</CodeGroup>

## 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ở.

<CodeGroup>
  ```js Vue 2 icon="vuejs" theme={null}
  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)
      },
  })
  ```

  ```js Vue 3 icon="vuejs" theme={null}
  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)
      },
  })
  ```

  ```jsx React icon="react" theme={null}
  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} />)
      },
  })
  ```

  ```js Svelte icon="s" theme={null}
  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 })
      },
  })
  ```
</CodeGroup>

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).

<CodeGroup>
  ```js Vue 2 icon="vuejs" theme={null}
  // Vite
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      return pages[`./Pages/${name}.vue`]
  },

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

  ```js Vue 3 icon="vuejs" theme={null}
  // Vite
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      return pages[`./Pages/${name}.vue`]
  },

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

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

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

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

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

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](/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`.

```js theme={null}
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](https://inertiajs.com/docs/v1/installation/client-side-setup). 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.