レガシーComposition API

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

モジュールの削除

• 依存関係から@vue/composition-apiを削除します。
• 依存関係から@nuxtjs/composition-apiを削除します（およびnuxt.configのモジュールからも削除します）。

@vue/composition-apiの使用

@vue/composition-apiのみを使用していて@nuxtjs/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は、現在使用しているほとんどのインポートに対して自動的に「shim」を提供し、新しい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

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

関数（defineNuxtMiddlewareの場合と同じ）を削除することにより、Nuxt 2スタイルのプラグインを引き続き使用することもできます。

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) {}

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)