I'm trying to setup a boilerplate in nuxt3 which checks before each request if the access to the current path/route is allowed.
Currently I've tested two different approches but both didn't work as expected:
middleware/test.ts file and calling it with middleware: ["test"].composables/useFoo.ts file and calling it with const foo = useFoo() inside of app.vueBoth solutions have an empty exported default function which only contains a console.log statement. The statement will be printed to the console at the initial load but not before/after change the route after clicking a NuxtLink. Is there any other solution to validate if the requested path is allowed including navitation with NuxtLink?
Im having a similar problem and looking for the same solution i guess , extending pages with (hooks) is the only thing i found that can meddle with the routes
hooks: {
'pages:extend' (pages) {
pages.push(
{
"name": "index",
"path": "/",
"children": [],
"file": resolve(__dirname, 'pages/test.vue')
},
)
}
},
First thing i noticed is this can overtake behaviour nuxts own vue-router thats automatically build-up using my pages directory. But the second thing i noticed is unlike exendRoutes i wont take the following parameter: "beforeEnter: [fn()],
So i still can't figure out how to match or redirect in the routing lifecycle....
But my issue was the same as yours i need to guard navigation... in my case. I got nested pages e.g. :
Vue-Router automatic router setup allways takes me to brand... I need a way to check the param and navigate to the corresponding route brand/group.
This seemed like a solution : defineNuxtRouteMiddleware, addRouterMiddleWare, definepagemeta. But i couldnt import addRouterMiddleWare, definepagemeta.
Maybe one of you has more luck ..