Плагины и middleware

Миграция плагинов и middleware с Nuxt 2 на Nuxt Bridge.

Новый формат плагинов

Можно перейти на API плагинов Nuxt 3 (формат отличается от Nuxt 2).

Плагин получает один аргумент — nuxtApp. Подробнее в документации.

app/plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('injected', () => 'my injected function')
  // доступно как nuxtApp.$injected
})
Чтобы использовать новые композаблы Nuxt (useNuxtApp, useRuntimeConfig и т.д.) в плагинах, объявляйте их через хелпер defineNuxtPlugin.
Через nuxtApp.vueApp доступен совместимый интерфейс, но не регистрируйте так плагины, директивы, миксины и компоненты без проверки «уже установлено» — иначе возможна утечка памяти.

Новый формат middleware

Можно перейти на API middleware Nuxt 3 (формат отличается от Nuxt 2).

Middleware получает два аргумента — to и from. Подробнее в документации.

export default defineNuxtRouteMiddleware((to) => {
  if (to.path !== '/') {
    return navigateTo('/')
  }
})
defineNuxtRouteMiddleware поддерживается только в каталоге app/middleware.

definePageMeta

В Nuxt Bridge доступен definePageMeta.

Включается опцией macros.pageMeta в конфиге:

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true,
    },
  },
})
Поддерживаются только ключи middleware и layout.