Nuxt•3mo ago

Nuxt server middleware rules

Where can I set Nuxt server middleware trigger rules? I want to set rule when to trigger my session.ts server middleware, which checks session token existence. Can this run only in /app directory and every other subdirectories?

11 Replies

kapa.ai•3mo ago

Hi @PetyXbron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, server middleware (placed in the server/middleware/ directory) is executed for every request by default. However, you can control when a specific server middleware is triggered by using the serverHandlers option in your nuxt.config.ts file. This allows you to specify the route(s) under which your middleware should run. For your use case—triggering session.ts middleware only for requests under /app and its subdirectories—you can configure it like this:

// nuxt.config.ts
export default defineNuxtConfig({
  serverHandlers: [
    {
      route: '/app/**', // This will match /app and all subdirectories
      handler: '~/server/middleware/session.ts',
      middleware: true
    }
  ]
})

// nuxt.config.ts
export default defineNuxtConfig({
  serverHandlers: [
    {
      route: '/app/**', // This will match /app and all subdirectories
      handler: '~/server/middleware/session.ts',
      middleware: true
    }
  ]
})

This setup ensures that your session.ts middleware will only run for requests to /app and its subdirectories, not for other routes. Note that files in server/middleware/ are otherwise run on every request unless you use this configuration to restrict them. For more details, see the serverHandlers documentation and the server middleware guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PetyXbronOP•3mo ago

@kapa.ai this looks like a possible and nice solution, but unfortunately it doesn't work. The redirect (sendRedirect()) in session.ts in /server/middleware/ triggers even when I am on localhost:3000/ (without /app root)

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct—according to the official Nuxt documentation, any middleware placed in the server/middleware/ directory is executed for every request, regardless of the route, unless you use the serverHandlers option in your nuxt.config.ts to register it with a specific route. However, the documentation also notes that files in server/middleware/ are automatically registered and run on every request, and there is no explicit example or guarantee that using serverHandlers to restrict a middleware file from server/middleware/ will override this default behavior. In fact, the docs state:

Files from server/api, server/middleware and server/routes will be automatically registered by Nuxt.
serverHandlers documentation

This means that even if you try to register a middleware with a specific route using serverHandlers, if the file is in server/middleware/, it will still be run globally. Workaround:
To achieve route-specific server middleware, you should place your handler in another directory (such as server/routes/ or a custom location) and register it via serverHandlers in your nuxt.config.ts with the desired route pattern. For example:

// nuxt.config.ts
export default defineNuxtConfig({
  serverHandlers: [
    {
      route: '/app/**',
      handler: '~/server/session-middleware.ts',
      middleware: true
    }
  ]
})

// nuxt.config.ts
export default defineNuxtConfig({
  serverHandlers: [
    {
      route: '/app/**',
      handler: '~/server/session-middleware.ts',
      middleware: true
    }
  ]
})

And move your middleware logic to server/session-middleware.ts (not in server/middleware/). This way, it will only be triggered for /app and its subdirectories. Summary:
- Middleware in server/middleware/ always runs globally. - To restrict middleware to certain routes, use serverHandlers and place your handler outside server/middleware/. - The knowledge sources do not mention a way to restrict files in server/middleware/ to specific routes only. For more details, see the serverHandlers documentation and the server middleware guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PetyXbronOP•3mo ago

@kapa.ai what about making rule inside the script instead of sendRedirect(), which doesn't probably even work

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can implement the route check directly inside your server middleware script. Since Nuxt server middleware in server/middleware/ runs on every request, you can add logic at the top of your middleware to only perform your session check (or redirect) if the request path matches /app or its subdirectories. Here’s an example based on the official documentation:

// server/middleware/session.ts
import { getRequestURL, sendRedirect } from 'h3'

export default defineEventHandler((event) => {
  const url = getRequestURL(event)
  if (!url.pathname.startsWith('/app')) {
    // Do nothing for routes outside /app
    return
  }

  // Your session logic here
  const hasSession = /* your session check logic */
  if (!hasSession) {
    return sendRedirect(event, '/login')
  }
})

// server/middleware/session.ts
import { getRequestURL, sendRedirect } from 'h3'

export default defineEventHandler((event) => {
  const url = getRequestURL(event)
  if (!url.pathname.startsWith('/app')) {
    // Do nothing for routes outside /app
    return
  }

  // Your session logic here
  const hasSession = /* your session check logic */
  if (!hasSession) {
    return sendRedirect(event, '/login')
  }
})

This way, the middleware will only act for requests under /app and will do nothing for other routes. This approach is supported by the documentation, which shows that middleware can inspect the request and decide whether to act or not, and should not return anything unless you want to terminate or redirect the request server middleware guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PetyXbronOP•3mo ago

@kapa.ai this one works, but only whenever I directly open /app or refresh the page there if I am redirecting from / to /app with internal button for example, the middleware script won't trigger

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, Nuxt server middleware (in server/middleware/) only runs on the server side—meaning it is triggered on direct requests to a URL (such as a page refresh or direct navigation), but not on client-side navigations (such as clicking an internal button or link that uses Vue Router to change the route). This is a fundamental distinction between server middleware and route middleware in Nuxt. - Server middleware is executed for every incoming HTTP request to the server, before the Nuxt app is rendered. It does not run on client-side navigations, which are handled by the Vue Router in the browser. - Route middleware (in the middleware/ directory, used with defineNuxtRouteMiddleware) runs within the Vue part of your app and is triggered on every route change, including client-side navigations server middleware guide getting started routing. If you want to protect routes both on direct access (server-side) and on client-side navigation, you need to implement your session check in both: - Server middleware: for direct requests and refreshes. - Route middleware: for client-side navigations. This dual approach is necessary because server middleware cannot intercept client-side navigations, and route middleware cannot protect API endpoints or SSR-only routes. Summary:
What you are experiencing is expected behavior in Nuxt. There is no built-in way for server middleware to trigger on client-side navigations. You must use route middleware for client-side protection getting started routing. If you need more details on how to set up route middleware, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt server middleware rules

Did you find this page helpful?