I use nuxt server middlewares in my project. They catch every request, whenever it's a page defined in the pages directory or something else (static assets etc). I want to limit some of my middlewares to catch only requests to pages. How can I achieve this?

I use nuxt server middlewares in my project. They catch every request, whenever it's a page defined in the pages directory or something else (static assets etc). I want to limit some of my middlewares to catch only requests to pages. How can I achieve this?

• vue.js
• vuejs3
• nuxt.js
• nuxt3.js
• nitro

1 Answer 1

You can use the path property. Make a middleware myMiddleware.js or whatever you want to name it, then configure it in nuxt.config.ts/js:

// server/middleware/myMiddleware.js

export default defineEventHandler((event) => {
  // Your middleware logic
  console.log('This is a page request!');
});

// nuxt.config.ts

export default defineNuxtConfig({
  serverMiddleware: [
    {
      handler: '~/server/middleware/myMiddleware.js',
      // Limit to page routes only, excluding static files and others
      path: '/:slug*',  // Match all page routes (e.g., /about, /blog/anything)
    },
  ],
});