Black Friday Week20% OFF on Nuxt UI Pro until Dec 2nd

Плагины и Middleware

Узнайте, как мигрировать из Nuxt 2 в Nuxt Bridge с новыми плагинами и middleware.

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

Теперь вы можете мигрировать на API-интерфейс плагинов Nuxt 3, который немного отличается по формату от Nuxt 2.

Плагины теперь принимают только один аргумент (nuxtApp). Вы можете узнать больше в документации.

plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('injected', () => 'моя внедряемая функция')
  // теперь доступен в `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 вне директории middleware не поддерживается.

definePageMeta

Вы также можете использовать definePageMeta в Nuxt Bridge.

Это можно включить с помощью опции macros.pageMeta в вашем файле конфигурации.

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

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true
    }
  }
})
Но только для middleware и layout.