客戶端設定

一旦您設定好 伺服器端框架，接下來您需要設定您的客戶端框架。Inertia 目前提供 React、Vue 和 Svelte 的支援。

Laravel 入門套件

Laravel 的 入門套件，Breeze 和 Jetstream，為新的 Inertia 應用程式提供開箱即用的基礎架構。這些入門套件是使用 Laravel 和 Vue 或 React 開始建構新的 Inertia 專案的最快方法。但是，如果您想手動將 Inertia 安裝到您的應用程式中，請參閱以下文件。

安裝相依性

首先，安裝對應您所選框架的 Inertia 客戶端適配器。

npm install @inertiajs/vue3

初始化 Inertia 應用程式

接下來，更新您的主要 JavaScript 檔案以啟動您的 Inertia 應用程式。為此，我們將使用基本的 Inertia 元件初始化客戶端框架。

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)
  },
})

setup 回呼接收初始化客戶端框架所需的所有內容，包括根 Inertia App 元件。

解析元件

resolve 回呼告訴 Inertia 如何載入頁面元件。它接收一個頁面名稱（字串），並回傳一個頁面元件模組。您如何實作這個回呼取決於您使用的 bundler（Vite 或 Webpack）。

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

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

預設情況下，我們建議預先載入您的元件，這將產生單一 JavaScript 套件。但是，如果您想延遲載入您的元件，請參閱我們的 程式碼分割 文件。

定義根元素

預設情況下，Inertia 假設您應用程式的根模板有一個 id 為 app 的根元素。如果您的應用程式的根元素具有不同的 id，您可以使用 id 屬性提供它。

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