クライアントサイドの設定

サーバーサイドフレームワークの設定が完了したら、クライアントサイドフレームワークを設定する必要があります。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}`),

デフォルトでは、コンポーネントをeager loadingすることをお勧めします。これにより、単一のJavaScriptバンドルが生成されます。ただし、コンポーネントをlazy-loadする場合は、コード分割のドキュメントを参照してください。

ルート要素の定義

デフォルトでは、Inertiaはアプリケーションのルートテンプレートにidが appのルート要素があると想定しています。アプリケーションのルート要素に異なるidがある場合は、idプロパティを使用して指定できます。

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