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

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

Удаление модулей

• Удалите @vue/composition-api из зависимостей.
• Удалите @nuxtjs/composition-api из зависимостей и из modules в 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 подставит «заглушки» для большинства старых импортов. Исключения:

• 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 больше не возвращает computed.

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

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

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