[Vuejs]-Nuxt3 – nested page structure not working properly

by

0👍

✅

Based on hints by @ReaganM the mistake was in middleware:

export default defineNuxtRouteMiddleware(async (to, from) => {
    const { isLogged, proceedAutoLogin } = useAuthStore();
        if (!isLogged){
            if (to.name !== 'login'){
                if (await proceedAutoLogin()){
                    return navigateTo(to.name)
                }else{
                    abortNavigation()
                    return navigateTo('/login')
                } 
            }
        }else{
            if (!await proceedAutoLogin()){
                abortNavigation()
                return navigateTo('/login')
            }
        }
  })

I was redirecting to to.name, the problem was that the name of nested routes is build up like Folder-File in my case Admin-Users. So I changed that part of code and redirecting to to.path and it works great.

Final middleware

export default defineNuxtRouteMiddleware(async (to, from) => {
    const { isLogged, proceedAutoLogin } = useAuthStore();
        if (!isLogged){
            if (to.name !== 'login'){
                if (await proceedAutoLogin()){
                    console.log(to)
                    return navigateTo(to.path)
                }else{
                    abortNavigation()
                    return navigateTo('/login')
                } 
            }
        }else{
            if (!await proceedAutoLogin()){
                abortNavigation()
                return navigateTo('/login')
            }
        }
  })

Leave a comment