客户端设置

一旦你配置好了服务器端框架，你就需要设置客户端框架。Inertia目前支持React、Vue和Svelte。

Laravel起始套件

Laravel的起始套件，Breeze和Jetstream，为新的Inertia应用程序提供开箱即用的脚手架。这些起始套件是使用Laravel和Vue或React开始构建新的Inertia项目的最快方法。然而，如果你想要手动安装Inertia到你的应用程序中，请参考下面的文档。

安装依赖项

首先，根据你选择的框架安装相应的Inertia客户端适配器。

npm install @inertiajs/vue3

初始化Inertia应用

接下来，更新你的主要JavaScript文件以启动你的Inertia应用。为了实现这一点，我们将用基本的Inertia组件初始化客户端框架。

Vue 2Vue 3ReactSvelte

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

Vue 2Vue 3ReactSvelte

// 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',
  // ...
})