Fix Middleware Error in Nuxt

Nuxt Middleware Errors

Nuxt 3 has two types of middleware: route middleware (runs on navigation) and server middleware (runs on every request). Errors in either can break navigation or API calls.

Route Middleware Redirect Loops

The most common issue — a middleware that redirects to a page that also triggers the middleware:

// middleware/auth.ts
// BAD — /login also has this middleware, causing infinite redirect
export default defineNuxtRouteMiddleware((to) => {
  const user = useAuth();
  if (!user.value) {
    return navigateTo('/login');
  }
});

// GOOD — exclude the login page
export default defineNuxtRouteMiddleware((to) => {
  if (to.path === '/login') return;

  const user = useAuth();
  if (!user.value) {
    return navigateTo('/login');
  }
});

Server Middleware Errors

Server middleware in server/middleware/ runs on every API request:

// server/middleware/log.ts
export default defineEventHandler((event) => {
  // BAD — throwing here breaks ALL API routes
  const apiKey = getHeader(event, 'x-api-key');
  if (!apiKey) throw createError({ statusCode: 401 });
});

// GOOD — only protect API routes
export default defineEventHandler((event) => {
  if (!event.path.startsWith('/api/')) return;

  const apiKey = getHeader(event, 'x-api-key');
  if (!apiKey) {
    throw createError({ statusCode: 401, message: 'API key required' });
  }
});

Middleware Execution Order

Global middleware (in middleware/ with .global.ts suffix) runs before page-specific middleware. Name them with numeric prefixes to control order:

middleware/
  01.auth.global.ts
  02.analytics.global.ts

Bugsly captures middleware errors in Nuxt with the route context, showing exactly which navigation triggered the failure.