客户端设置

完成 服务器端框架配置 后，您需要设置您的客户端框架。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 如何加载页面组件。它接收一个页面名称（字符串），并返回一个页面组件模块。如何实现此回调取决于您使用的捆绑器（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',
  // ...
})