setting nuxt route middleware in routeRules

[danielroe]

Nuxt currently supports defining global route middleware (with .global. suffix) and named route middleware that can be opted-into per-route using definePageMeta.

But in some cases there are more complex patterns, where users may want to set middleware for a group of pages or apply a named middleware to the entire site. For example:

• Extend Nuxt 3 Middleware usage. #21454
• Allow to set global middlewares from nuxt.config.ts #19948

To resolve these issues, we can support a new route rule. Something like:

export default defineNuxtConfig({
  routeRules: {
    '/**': {
      routeMiddleware: 'auth',
      routeMiddleware: ['auth'],
      // both above are normalised to object syntax, which allows overriding
      // in another more specific route-rule
      routeMiddleware: {
        auth: true
      }
    },
  }
})

We're currently thinking about the best name for the rule. I think at the moment routeMiddleware makes most sense as we have defineNuxtRouteMiddleware but ideas welcome to make it clear that this is only relevant in the Vue part of your app (i.e. not applied to nitro routes).

Note: This rule will be possible once #21370 is implemented.

[pi0]

I like the idea but only as also discussed in a team meeting, using route or router prefixes is really unsafe and also ambegious. Nitro at any stage might use these prefixes for server middleware and it conflicts with Nuxt and they shall remain reserved especially when adding top-level keys to route rules.

pageMiddleware, appMiddleware, and nuxtMiddleware are safer and i advice to use them. (We might be thinking to rename defineNuxtRouteMiddleware to defineNuxtMiddleware or defineNuxtPageMiddleware for consistency )

[Hebilicious]

I like nuxtMiddleware. It gives a good mental model, we already have nuxtPlugin and nitroPlugin, we could go all the way and rename with nuxtMiddleware and nitroMiddleware.

[kalvenschraut]

Would this cover server middleware also? Main use case is I want to by default protect all API routes so they are authenticated, but have some kind of allow list of which ones can be public.

I suppose I could do this with regex and checking the path in the middleware currently, definitely would prefer setting in the nuxt config though.

[Subin-Qreative]

Would this cover server middleware also? Main use case is I want to by default protect all API routes so they are authenticated, but have some kind of allow list of which ones can be public.

I suppose I could do this with regex and checking the path in the middleware currently, definitely would prefer setting in the nuxt config though.

yes this would be such a nice feature , im suprised it is currently not possible as a config