Extend Nuxt 3 Middleware usage.

[waleedtariq109]

Describe the feature

I was wondering if we could add the layout name as a prefix to the middleware name, similar to how we add global middleware for all pages.

For example:

If we have two layouts, master.vue and default.vue, and we only want to run the auth.js middleware for pages that are using the master layout, we can name the file auth.master.js. Now the auth middleware should only run for pages that are using the master layout. Nuxt should be smart enough to detect if the prefix is global, and if so, run that middleware for every page. If the prefix is not global, Nuxt should check if there is any layout that matches the middleware prefix, and if yes, run that middleware for every page that uses that layout.

Alternatively,

Nuxt could provide some sort of composable/compiler macro that allows us to add middleware to a layout such as:

defineLayoutMeta({
  middleware: ["some-middleware"]
})

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[waleedtariq109]

@danielroe What's your opinion on this?

[Atinux]

Hi @waleedtariq109

I believe you can already do this with a global middleware, let's name it middleware/auth.master.global.ts.

export default defineNuxtRouteMiddleware((to) => {
  // Check if next route has master layout
  if (to.meta.layout !== 'master') return
  // Do the check if user is authenticated
})

[danielroe]

The tricky thing with this is that <NuxtLayout> can be used within pages - even multiple layouts can be. We would probably need to restrict layout meta merging with page meta to layout explicitly set within definePageMeta. So my worry there would be that it might not be intuitive as to when this middleware gets used.

Another option might be something like this:

export default defineNuxtRouteMiddleware((to) => {
  // 
}, { filter: page => page.meta.layout === 'master' })

But I'm not sure that saves much space compared to @Atinux's suggestion, which seems good to me.

[waleedtariq109]

@Atinux It works, Thanks

[solamichealolawale]

I haven't dedicated much consideration to this idea yet, as we can customize the default layout for all pages using the name prop. However, I'm pondering the possibility of introducing a middleware prop for a similar purpose as shown below.

<NuxtLayout :middleware="authMiddleware">
    <NuxtPage />
  </NuxtLayout>