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

# Hướng dẫn nâng cấp lên v1.0

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

Bạn có thể xem tài liệu cũ của Inertia.js v0.11 tại [legacy.inertiajs.com](https://legacy.inertiajs.com).

## Có gì mới

Inertia.js v1.0 tập trung đơn giản hóa kiến trúc tổng thể của dự án với mục tiêu giúp Inertia dễ bảo trì và dễ sử dụng hơn.

Phiên bản này bao gồm một số breaking change, chủ yếu liên quan đến tên package và các named export được cập nhật. Hướng dẫn này giải thích cách nâng cấp dự án lên v1.0.

Để xem danh sách đầy đủ mọi thay đổi, hãy đọc [release note](https://github.com/inertiajs/inertia/releases/tag/v1.0.0).

## Dependency mới

Ở các bản Inertia trước đây, bạn phải cài nhiều thư viện, bao gồm thư viện core (`@inertiajs/inertia`), adapter lựa chọn (`@inertiajs/inertia-vue|vue3|react|svelte`), thư viện progress (`@inertiajs/progress`) và nếu dùng server-side rendering thì cả thư viện server (`@inertiajs/server`).

**Từ phiên bản này, bạn chỉ cần cài một thư viện duy nhất** — adapter bạn lựa chọn (Vue, React hoặc Svelte); mọi thư viện core còn lại sẽ được cài tự động.

Để bắt đầu, hãy gỡ *tất cả* thư viện Inertia cũ.

<CodeGroup>
  ```bash Vue 2 theme={null}
  npm remove @inertiajs/inertia @inertiajs/inertia-vue @inertiajs/progress @inertiajs/server
  ```

  ```bash Vue 3 theme={null}
  npm remove @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress @inertiajs/server
  ```

  ```bash React icon="react" theme={null}
  npm remove @inertiajs/inertia @inertiajs/inertia-react @inertiajs/progress @inertiajs/server
  ```

  ```bash Svelte icon="s" theme={null}
  npm remove @inertiajs/inertia @inertiajs/inertia-svelte @inertiajs/progress @inertiajs/server
  ```
</CodeGroup>

Tiếp theo, cài adapter Inertia mới mà bạn muốn dùng. Các thư viện adapter mới đã được đổi tên và không còn chứa `inertia-` trong tên package.

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

## Import được đổi tên

Tiếp theo, cập nhật toàn bộ import liên quan đến Inertia trong dự án để dùng tên thư viện adapter mới. Mọi import hiện đều có sẵn từ thư viện adapter, nghĩa là bạn không còn import gì trực tiếp từ thư viện core Inertia, thư viện progress hay thư viện server.

Ngoài ra, một số export đã được đổi tên và các export từng bị deprecated đã bị loại bỏ. Ví dụ, export `Inertia` được đổi tên thành `router`.

Dưới đây là danh sách đầy đủ các thay đổi về import:

<CodeGroup>
  ```js Vue 2 theme={null}
  import { Inertia } from '@inertiajs/inertia' // [!code --]
  import { router } from '@inertiajs/vue2' // [!code ++]

  import createServer from '@inertiajs/server' // [!code --]
  import createServer from '@inertiajs/vue2/server' // [!code ++]

  import { createInertiaApp } from '@inertiajs/inertia-vue' // [!code --:5]
  import { App } from '@inertiajs/inertia-vue'
  import { app } from '@inertiajs/inertia-vue'
  import { InertiaApp } from '@inertiajs/inertia-vue'
  import { plugin } from '@inertiajs/inertia-vue'
  import { createInertiaApp } from '@inertiajs/vue2' // [!code ++]

  import { Head } from '@inertiajs/inertia-vue' // [!code --:2]
  import { InertiaHead } from '@inertiajs/inertia-vue'
  import { Head } from '@inertiajs/vue2' // [!code ++]

  import { Link } from '@inertiajs/inertia-vue' // [!code --:3]
  import { link } from '@inertiajs/inertia-vue'
  import { InertiaLink } from '@inertiajs/inertia-vue'
  import { Link } from '@inertiajs/vue2' // [!code ++]
  ```

  ```js Vue 3 theme={null}
  import { Inertia } from '@inertiajs/inertia' // [!code --]
  import { router } from '@inertiajs/vue3' // [!code ++]

  import createServer from '@inertiajs/server' // [!code --]
  import createServer from '@inertiajs/vue3/server' // [!code ++]

  import { createInertiaApp } from '@inertiajs/inertia-vue3' // [!code --:5]
  import { App } from '@inertiajs/inertia-vue3'
  import { app } from '@inertiajs/inertia-vue3'
  import { plugin } from '@inertiajs/inertia-vue3'
  import { InertiaApp } from '@inertiajs/inertia-vue3'
  import { createInertiaApp } from '@inertiajs/vue3' // [!code ++]

  import { usePage } from '@inertiajs/inertia-vue3' // [!code --]
  import { usePage } from '@inertiajs/vue3' // [!code ++]

  import { useForm } from '@inertiajs/inertia-vue3' // [!code --]
  import { useForm } from '@inertiajs/vue3' // [!code ++]

  import { useRemember } from '@inertiajs/inertia-vue3' // [!code --]
  import { useRemember } from '@inertiajs/vue3' // [!code ++]

  import { Head } from '@inertiajs/inertia-vue3' // [!code --:2]
  import { InertiaHead } from '@inertiajs/inertia-vue3'
  import { Head } from '@inertiajs/vue3' // [!code ++]

  import { Link } from '@inertiajs/inertia-vue3' // [!code --:3]
  import { link } from '@inertiajs/inertia-vue3'
  import { InertiaLink } from '@inertiajs/inertia-vue3'
  import { Link } from '@inertiajs/vue3' // [!code ++]
  ```

  ```js React icon="react" theme={null}
  import { Inertia } from '@inertiajs/inertia' // [!code --]
  import { router } from '@inertiajs/react' // [!code ++]

  import createServer from '@inertiajs/server' // [!code --]
  import createServer from '@inertiajs/react/server' // [!code ++]

  import { createInertiaApp } from '@inertiajs/inertia-react' // [!code --:4]
  import { App } from '@inertiajs/inertia-react'
  import { app } from '@inertiajs/inertia-react'
  import { InertiaApp } from '@inertiajs/inertia-react'
  import { createInertiaApp } from '@inertiajs/react' // [!code ++]

  import { usePage } from '@inertiajs/inertia-react' // [!code --]
  import { usePage } from '@inertiajs/react' // [!code ++]

  import { useForm } from '@inertiajs/inertia-react' // [!code --]
  import { useForm } from '@inertiajs/react' // [!code ++]

  import { useRemember } from '@inertiajs/inertia-react' // [!code --:2]
  import { useRememberedState } from '@inertiajs/inertia-react'
  import { useRemember } from '@inertiajs/react' // [!code ++]

  import { Head } from '@inertiajs/inertia-react' // [!code --:2]
  import { InertiaHead } from '@inertiajs/inertia-react'
  import { Head } from '@inertiajs/react' // [!code ++]

  import { Link } from '@inertiajs/inertia-react' // [!code --:3]
  import { link } from '@inertiajs/inertia-react'
  import { InertiaLink } from '@inertiajs/inertia-react'
  import { Link } from '@inertiajs/react' // [!code ++]
  ```

  ```js Svelte icon="s" theme={null}
  import { Inertia } from '@inertiajs/inertia' // [!code --]
  import { router } from '@inertiajs/svelte' // [!code ++]

  import { createInertiaApp } from '@inertiajs/inertia-svelte' // [!code --:4]
  import { App } from '@inertiajs/inertia-svelte'
  import { app } from '@inertiajs/inertia-svelte'
  import { InertiaApp } from '@inertiajs/inertia-svelte'
  import { createInertiaApp } from '@inertiajs/svelte' // [!code ++]

  import { page } from '@inertiajs/inertia-svelte' // [!code --]
  import { page } from '@inertiajs/svelte' // [!code ++]

  import { inertia } from '@inertiajs/inertia-svelte' // [!code --]
  import { inertia } from '@inertiajs/svelte' // [!code ++]

  import { useForm } from '@inertiajs/inertia-svelte' // [!code --]
  import { useForm } from '@inertiajs/svelte' // [!code ++]

  import { useRemember } from '@inertiajs/inertia-svelte' // [!code --:2]
  import { remember } from '@inertiajs/inertia-svelte'
  import { remember } from '@inertiajs/svelte' // [!code ++]

  import { Link } from '@inertiajs/inertia-svelte' // [!code --:3]
  import { link } from '@inertiajs/inertia-svelte'
  import { InertiaLink } from '@inertiajs/inertia-svelte'
  import { Link } from '@inertiajs/svelte' // [!code ++]
  ```
</CodeGroup>

Không còn có thể cấu hình Inertia thủ công bằng export `App`. Thay vào đó, bạn nên dùng helper `createInertiaApp()`. Xem tài liệu [thiết lập phía client](/client-side-setup#initialize-the-inertia-app) để biết thêm thông tin.

## Progress

Trước đây, progress indicator có dưới dạng plugin riêng (`@inertiajs/progress`). Hiện nó được cài và bật mặc định.

Nếu chưa thực hiện, hãy gỡ thư viện progress cũ.

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

  ```bash Vue 3 theme={null}
  npm remove @inertiajs/progress
  ```

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

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

Tiếp theo, bỏ import `InertiaProgress` và lời gọi `InertiaProgress.init()` vì chúng không còn cần thiết.

```js theme={null}
import { InertiaProgress } from '@inertiajs/progress' // [!code --:2]
InertiaProgress.init()
```

Cuối cùng, nếu đã có tùy chỉnh progress, bạn có thể chuyển chúng sang property `progress` của helper `createInertiaApp()`.

```js theme={null}
createInertiaApp({
    progress: {
        color: '#29d',
    },
    // ...
})
```

Nếu dùng progress indicator tùy chỉnh, bạn có thể tắt progress indicator mặc định bằng cách đặt property `progress` thành `false`.

```js theme={null}
createInertiaApp({
    progress: false,
    // ...
})
```

## Đối số setup

Chúng tôi đã loại bỏ đối số chữ thường `app` từng bị deprecated trong phương thức `setup()` của `createInertiaApp()`. Hãy dùng `App` thay thế.

```js theme={null}
createInertiaApp({
    // ...
    setup({ app, props }) { // [!code --]
    setup({ App, props }) { // [!code ++]
        // ...
    },
})
```

## usePage đơn giản hơn

Trong adapter Vue 3, hook `usePage()` đã được đơn giản hóa để không còn yêu cầu thêm `.value` sau các property `component`, `props`, `url` và `version`.

Nếu đang dùng hook `usePage()`, hãy xóa toàn bộ `.value` tương ứng.

```js theme={null}
import { computed } from 'vue'
const appName = computed(() => usePage().props.value.appName) // [!code --]
const appName = computed(() => usePage().props.appName) // [!code ++]
```

***

## 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/getting-started/upgrade-guide). 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.