docs: setting middleware at build time

[justinkekeocha]

Instead of using 'definePageMeta' on each page, it may be handy to just on certain routes that should have a certain middle ware

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	31a7f07

[danielroe]

I'm not sure I would recommend this as it will only run on the first load and not on subsequent navigations.

You could however add the named middleware in ~/app/router.options.ts or even at build time in pages:extend hook, which would probably be the most performant option.

[justinkekeocha]

I tried it and you are correct. could you please show how to do this from the pages:extend hook

[danielroe]

import type { NuxtPage } from 'nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      function setMiddleware (pages: NuxtPage[]) {
        for (const page of pages) {
          if (/* some condition */ true) {
            page.meta ||= {}
            // Note that this will override any middleware set in `definePageMeta` in the page
            page.meta.middleware = ['named']
          }
          if (page.children) {
            setMiddleware(page.children)
          }
        }
      }
      setMiddleware(pages)
    }
  }
})

[justinkekeocha]

Thank you for your help Dan. While I was waiting for your answer yesterday, I went experimenting and discovered that i could achieve the same thing by creating a global middleware and calling other middleware like this:

import auth from "~/middleware/auth";
import admin from "~/middleware/admin";

export default defineNuxtRouteMiddleware((to, from) => {
  const currentRoute = to.fullPath;

  if (currentRoute.includes("/dashboard")) {
         //The check for admin group should come first, else /dashboard will run and return
        //Then routes like /dashboard/admin will pass
       if (currentRoute.includes("/admin")) {
         return admin(to, from);
       }
       return auth(to, from);
  }
});

What do you think about this?