Как работают middleware в Nuxt?

Вопрос

Что такое route middleware в Nuxt и какие они бывают?

Короткий ответ

Route middleware — это функции, выполняющиеся перед переходом на страницу. Используются для проверки авторизации, редиректов, загрузки обязательных данных до рендера.

Подробный ответ

Три способа объявить middleware:

1. Именованный — файл в middleware/auth.ts, подключается через definePageMeta({ middleware: 'auth' }).
2. Глобальный — файл с суффиксом .global.ts (middleware/analytics.global.ts), выполняется на каждой навигации автоматически.
3. Inline — функция прямо внутри definePageMeta({ middleware: [...] }) на конкретной странице.

Сигнатура middleware — (to, from) => { ... }. Внутри можно:

• вызвать return navigateTo('/login') для редиректа;
• вернуть abortNavigation('Сообщение'), чтобы отменить переход;
• ничего не возвращать — навигация продолжится как обычно.

Middleware выполняются до рендера страницы, в порядке: глобальные → именованные, указанные на странице.

Пример

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const isAuthenticated = useState('authenticated')

  if (!isAuthenticated.value && to.path !== '/login') {
    return navigateTo('/login')
  }
})

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

Дополнительные вопросы

• Чем route middleware отличается от server middleware (server/middleware/)?
• Выполняется ли middleware на сервере при первой загрузке страницы?
• Как передать данные из middleware в саму страницу?