v1.0 アップグレードガイド

新機能

Inertia.js v1.0 は、プロジェクト全体のアーキテクチャを簡素化することに重点を置いており、Inertia の保守と使用を容易にすることを目標としています。

これには、多くの破壊的変更が含まれており、ほとんどはパッケージ名と更新された名前付きエクスポートに関連しています。このガイドでは、プロジェクトを v1.0 にアップグレードする方法について説明します。

すべての変更の完全なリストについては、 リリースノート.

新しい依存関係

以前の Inertia リリースを使用するには、コアライブラリ（@inertiajs/inertia）、選択したアダプター（@inertiajs/inertia-vue|vue3|react|svelte）、プログレスライブラリ（@inertiajs/progress）、サーバーサイドレンダリングを使用している場合はサーバーライブラリ（@inertiajs/server）など、多くのライブラリをインストールする必要がありました。

今後は、選択したアダプター（Vue、React、または Svelte）を1つインストールするだけで済みます。他のすべてのコアライブラリは自動的にインストールされます。

開始するには、古い Inertia ライブラリをすべて削除してください。

npm remove @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress @inertiajs/server

次に、選択した新しい Inertia アダプターをインストールします。新しいアダプターライブラリは名前が変更され、inertia- は含まれなくなりました。

npm install @inertiajs/vue3

名前が変更されたインポート

次に、プロジェクト内のすべての Inertia 関連のインポートを新しいアダプターライブラリ名を使用するように更新します。すべてのインポートはアダプターライブラリから利用できるようになったため、Inertia コアライブラリ、プログレスライブラリ、またはサーバーライブラリから何もインポートしなくなりました。

さらに、一部のエクスポートの名前が変更され、以前は非推奨だったエクスポートは削除されました。たとえば、Inertia エクスポートは router に名前が変更されました。

インポートの変更の完全なリストを以下に示します。

- import { Inertia } from '@inertiajs/inertia'
+ import { router } from '@inertiajs/vue3'

- import createServer from '@inertiajs/server'
+ import createServer from '@inertiajs/vue3/server'

- import { createInertiaApp } from '@inertiajs/inertia-vue3'
- 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'

- import { usePage } from '@inertiajs/inertia-vue3'
+ import { usePage } from '@inertiajs/vue3'

- import { useForm } from '@inertiajs/inertia-vue3'
+ import { useForm } from '@inertiajs/vue3'

- import { useRemember } from '@inertiajs/inertia-vue3'
+ import { useRemember } from '@inertiajs/vue3'

- import { Head } from '@inertiajs/inertia-vue3'
- import { InertiaHead } from '@inertiajs/inertia-vue3'
+ import { Head } from '@inertiajs/vue3'

- import { Link } from '@inertiajs/inertia-vue3'
- import { link } from '@inertiajs/inertia-vue3'
- import { InertiaLink } from '@inertiajs/inertia-vue3'
+ import { Link } from '@inertiajs/vue3'

プログレス

以前は、プログレスインジケーターは個別のプラグイン（@inertiajs/progress）として利用できました。現在はデフォルトでインストールされ、有効になっています。

まだの場合は、古いプログレスライブラリを削除してください。

npm remove @inertiajs/progress

次に、InertiaProgress インポートと InertiaProgress.init() の呼び出しを削除します。これらは不要になりました。

- import { InertiaProgress } from '@inertiajs/progress'

- InertiaProgress.init()

最後に、プログレスのカスタマイズを定義した場合は、progressプロパティを createInertiaApp() ヘルパーに移動できます。

createInertiaApp({
  progress: {
    color: '#29d',
  },
  // ...
})

カスタムプログレスインジケーターを使用している場合は、 progress プロパティを false に設定して、デフォルトのプログレスインジケーターを無効にすることができます。

createInertiaApp({
  progress: false,
  // ...
})

設定引数

createInertiaApp() の setup() メソッドから、以前は非推奨だった小文字の app 引数を削除しました。App を代わりに使用してください。

  createInertiaApp({
    // ...
-   setup({ app, props }) {
+   setup({ App, props }) {
      // ...
    },
  })

簡素化された usePage

Vue 3 アダプターでは、usePage() フックを簡素化し、 component、props、url、および version プロパティの後に .value を追加する必要がなくなりました。

usePage() フックを使用している場合は、.value のすべてのインスタンスを削除してください。

  import { computed } from 'vue'

- const appName = computed(() => usePage().props.value.appName)
+ const appName = computed(() => usePage().props.appName)