Устаревшее Composition API

Nuxt Bridge предоставляет доступ к синтаксису Composition API. Он специально разработан для соответствия Nuxt 3. Из-за этого при включении Nuxt Bridge необходимо выполнить несколько дополнительных шагов, если вы ранее использовали Composition API.

Удалите модули

• Удалите @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 реализует Composition API немного иначе, чем @nuxtjs/composition-api, и предоставляет другие композаблы (которые разработаны для соответствия композаблам, предоставляемым Nuxt 3).

Поскольку некоторые композаблы были удалены и пока нет замены, это будет немного более сложный процесс.

Удалите @nuxtjs/composition-api/module из вашего buildModules

Вам не нужно немедленно обновлять свои импорты - 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 // Если миграция на Nitro завершена, установите значение 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) {}

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)