37% OFF during Black Friday at Mastering Nuxt.

Плагины и Middleware

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

Плагины

Плагины теперь имеют другой формат и принимают только один аргумент (nuxtApp).

export default (ctx, inject) => {
  inject('injected', () => 'моя внедряемая функция')
})
Узнать больше Docs > Guide > Directory Structure > Plugins.
Узнайте больше о формате nuxtApp.

Миграция

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

Route Middleware

Middleware для маршрутов имеет другой формат.

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

Подобно Nuxt 2, middleware для маршрутов, размещенное в вашей папке ~/middleware, регистрируется автоматически. Затем вы можете указать его по имени в компоненте. Однако, это делается с помощью definePageMeta, а не как опция компонента.

navigateTo - это одна из нескольких вспомогательных функций для маршрутов.

Узнать больше Docs > Guide > Directory Structure > Middleware.

Миграция

  1. Перенесите свою middleware для маршрутов, используя вспомогательную функцию defineNuxtRouteMiddleware.
  2. Любая глобальная middleware (например, в вашем nuxt.config) можно разместить в вашей папке ~/middleware с расширением .global, например ~/middleware/auth.global.ts.