レガシー Composition API

Nuxt Bridge を使用して Composition API に移行する方法を学びます。

Nuxt Bridge は Composition API の構文へのアクセスを提供します。これは Nuxt 3 と整合するように特別に設計されています。そのため、以前に Composition API を使用していた場合は、Nuxt Bridge を有効にする際にいくつか追加の手順を踏む必要があります。

モジュールの削除

  • 依存関係から @vue/composition-api を削除します。
  • 依存関係から (そして nuxt.config のモジュールから) @nuxtjs/composition-api を削除します。

@vue/composition-api の使用

@nuxtjs/composition-api ではなく @vue/composition-api のみを使用していた場合、非常に簡単です。

  1. まず、Composition API を手動で登録しているプラグインを削除します。Nuxt Bridge がこれを処理します。
    - import Vue from 'vue'
- import VueCompositionApi from '@vue/composition-api'
-
- Vue.use(VueCompositionApi)
  2. それ以外に、何もする必要はありません。ただし、必要であれば、@vue/composition-api からの明示的なインポートを削除し、Nuxt Bridge が自動的にインポートするのに頼ることができます。

@nuxtjs/composition-api からの移行

Nuxt Bridge は @nuxtjs/composition-api とはわずかに異なる Composition API を実装し、異なるコンポーザブル (Nuxt 3 が提供するコンポーザブルと整合するように設計されています) を提供します。

一部のコンポーザブルが削除され、まだ代替がないため、これは少し複雑なプロセスになります。

buildModules から @nuxtjs/composition-api/module を削除します。

インポートをすぐに更新する必要はありません。Nuxt Bridge は、既存のほとんどのインポートに対して「シム」を自動的に提供し、以下の例外を除いて、新しい Nuxt 3 互換のコンポーザブルに移行する時間を与えます。

  • withContext は削除されました。詳細は以下を参照してください。
  • useStatic は削除されました。現在、代替はありません。使用例がある場合は、自由に議論を提起してください。
  • 非推奨だった reqRef と reqSsrRef は完全に削除されました。これを置き換えるには、ssrRef に関する以下の指示に従ってください。

bridge.capi の設定

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    capi: true,
    nitro: false, // If migration to Nitro is complete, set to true
  },
})

@nuxtjs/composition-api から使用している他の各コンポーザブルについて、以下の手順に従ってください。

useFetch

$fetchState と $fetch は削除されました。

const {
- $fetch,
- $fetchState,
+ fetch,
+ fetchState,
} = useFetch(() => { posts.value = await $fetch('/api/posts') })

defineNuxtMiddleware

これは、現在削除されている型ヘルパーのスタブ関数でした。

defineNuxtMiddleware ラッパーを削除します。

- import { defineNuxtMiddleware } from '@nuxtjs/composition-api`
- export default defineNuxtMiddleware((ctx) => {})
+ export default (ctx) => {}

TypeScript のサポートには、@nuxt/types を使用できます。

import type { Middleware } from '@nuxt/types'

export default <Middleware> function (ctx) { }

defineNuxtPlugin

これは、現在削除されている型ヘルパーのスタブ関数でした。

また、関数を削除することで Nuxt 2 スタイルのプラグインを引き続き使用することもできます (defineNuxtMiddleware と同様)。

defineNuxtPlugin ラッパーを削除します。

- import { defineNuxtPlugin } from '@nuxtjs/composition-api'
- export default defineNuxtPlugin((ctx, inject) => {})
+ export default (ctx, inject) => {}

TypeScript のサポートには、@nuxt/types を使用できます。

import type { Plugin } from '@nuxt/types'

export default <Plugin> function (ctx, inject) {}
この例は有効ですが、Nuxt 3 では署名がわずかに異なる新しい defineNuxtPlugin 関数が導入されています。
リンクが見つかりませんで詳細を読む。

useRouter と useRoute

Nuxt Bridge は、これらのコンポーザブルの直接の代替を useRouter と useRoute を介して提供します。

唯一の主な違いは、useRoute が計算プロパティを返さなくなったことです。

- import { useRouter, useRoute } from '@nuxtjs/composition-api'

  const router = useRouter()
  const route = useRoute()

- console.log(route.value.path)
+ console.log(route.path)