Плагины и middleware

Плагины

Формат плагинов изменился: плагин принимает один аргумент — nuxtApp.

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
}

export default defineNuxtPlugin((nuxtApp) => {
  // теперь доступно как nuxtApp.$injected
  nuxtApp.provide('injected', () => 'my injected function')

  // Альтернатива — возврат объекта с автоматической поддержкой типов
  return {
    provide: {
      injected: () => 'my injected function',
    },
  }
})

Миграция

1. Переведите плагины на хелпер defineNuxtPlugin.
2. Удалите из массива plugins в nuxt.config записи для файлов из app/plugins/. Все файлы в этом каталоге (и index в подкаталогах) регистрируются автоматически. Вместо mode: 'client' или 'server' укажите это в имени файла, например ~/plugins/my-plugin.client.ts — только для клиента.

Маршрутный middleware

Формат маршрутного middleware изменился.

export default function ({ store, redirect }) {
  // Если пользователь не аутентифицирован
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')
  if (!auth.value.authenticated) {
    return navigateTo('/login')
  }
})

Как и в Nuxt 2, middleware из папки ~/middleware регистрируется автоматически; в компоненте его указывают по имени. Но теперь это делается через definePageMeta, а не через опцию компонента.

navigateTo — одна из хелпер-функций для маршрутизации.

Миграция

1. Переведите route middleware на хелпер defineNuxtRouteMiddleware.
2. Глобальный middleware (ранее в nuxt.config) разместите в ~/middleware с расширением .global, например ~/middleware/auth.global.ts.