Устаревшее 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 автоматически предоставит прослойку-заглушку для большинства ваших текущих импортов, чтобы дать вам время на миграцию на новые, совместимые с Nuxt 3 композаблы, со следующими исключениями:

• withContext был удалён. См. ниже.
• useStatic удалён, прямой замены нет. Если сценарий с useStatic важен — опишите его в обсуждении на GitHub.
• 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}

Это была вспомогательная функция-заглушка для типов, которая теперь удалена.

Удалите обёртку 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)