N
Nuxt•9mo ago
NT Diesel

Layout doesn't change when using navigateTo in the nuxt middleware

this is my /auth/login page 
<script setup>
    definePageMeta({
        middleware: ["require-unauth"],
        layout: "auth",
    });
</script>
<script setup>
    definePageMeta({
        middleware: ["require-unauth"],
        layout: "auth",
    });
</script>
this is my auth layout 
<template>
    <div class="relative min-h-[100dvh]">
        <!-- start of bg of the auth pages -->
        <div class="absolute h-full w-full">
            <img src="/imgs/auth-bg.jpg" class="w-full h-full object-cover" />
            <div class="w-full h-full absolute bg-FrameOne/30 inset-0"></div>
            <img
                src="/imgs/logo.png"
                class="absolute top-2 left-2 w-[15%] object-cover aspect-square"
            />
        </div>
        <!-- end of bg of the auth pages -->
        <slot />
    </div>
</template>
<template>
    <div class="relative min-h-[100dvh]">
        <!-- start of bg of the auth pages -->
        <div class="absolute h-full w-full">
            <img src="/imgs/auth-bg.jpg" class="w-full h-full object-cover" />
            <div class="w-full h-full absolute bg-FrameOne/30 inset-0"></div>
            <img
                src="/imgs/logo.png"
                class="absolute top-2 left-2 w-[15%] object-cover aspect-square"
            />
        </div>
        <!-- end of bg of the auth pages -->
        <slot />
    </div>
</template>
7 Replies
NT Diesel
NT DieselOP•9mo ago
this is my index page 
<script setup>
    definePageMeta({
        middleware: ["require-auth"],
        layout: "home",
    });
</script>
<template>
    <div></div>
</template>
<script setup>
    definePageMeta({
        middleware: ["require-auth"],
        layout: "home",
    });
</script>
<template>
    <div></div>
</template>
this is my home layout 
<template>
    <div class="relative min-h-[100dvh] bg-white flex">
        <!-- start of side bar -->
        <UiSidebar />
        <!-- end of side bar -->
        <div class="flex flex-col gap-4">
            <!-- start of nav bar -->
            <!-- end of nav bar -->
            <slot />
        </div>
    </div>
</template>
<template>
    <div class="relative min-h-[100dvh] bg-white flex">
        <!-- start of side bar -->
        <UiSidebar />
        <!-- end of side bar -->
        <div class="flex flex-col gap-4">
            <!-- start of nav bar -->
            <!-- end of nav bar -->
            <slot />
        </div>
    </div>
</template>
this is my require-unauth middleware 
import { useMainStore } from "~/stores/main";

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.server) return;

    const MainStore = useMainStore();

    if (MainStore.AccessToken) {
        return navigateTo("/");
    }
    const config = useRuntimeConfig();
    try {
        const resp = await $fetch(`${config.public.serverApi}/login`, {
            method: "post",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: {
                fromRefresh: true,
            },
            server: false,
        });
        MainStore.Login(resp.username, resp.accessToken);
        return navigateTo("/");
    } catch (e) {
        return;
    }
});
import { useMainStore } from "~/stores/main";

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.server) return;

    const MainStore = useMainStore();

    if (MainStore.AccessToken) {
        return navigateTo("/");
    }
    const config = useRuntimeConfig();
    try {
        const resp = await $fetch(`${config.public.serverApi}/login`, {
            method: "post",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: {
                fromRefresh: true,
            },
            server: false,
        });
        MainStore.Login(resp.username, resp.accessToken);
        return navigateTo("/");
    } catch (e) {
        return;
    }
});
this is the require-auth middle ware 
import { useMainStore } from "~/stores/main";

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.server) return;

    const MainStore = useMainStore();

    const config = useRuntimeConfig();
    try {
        const resp = await $fetch(`${config.public.serverApi}/login`, {
            method: "post",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: {
                fromRefresh: true,
            },
            server: false,
        });
        MainStore.Login(resp.username, resp.accessToken);
        return;
    } catch (e) {
        console.log(e.data.message);
        return navigateTo("/auth/login");
    }
});
import { useMainStore } from "~/stores/main";

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.server) return;

    const MainStore = useMainStore();

    const config = useRuntimeConfig();
    try {
        const resp = await $fetch(`${config.public.serverApi}/login`, {
            method: "post",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: {
                fromRefresh: true,
            },
            server: false,
        });
        MainStore.Login(resp.username, resp.accessToken);
        return;
    } catch (e) {
        console.log(e.data.message);
        return navigateTo("/auth/login");
    }
});
when i try to access to /auth/login while i am already logged in it redirect me back to the index page but doesnt change the layout and gives me this error on console chunk-2435C5CU.js?v=991d9edc:1513 [Vue warn]: Hydration node mismatch: rendered on server: <!--[--> (start of fragment) expected on client: div at <Home ref=Ref< undefined > > at <LayoutLoader key="home" layoutProps= {ref: RefImpl}ref: RefImpldep: undefinedv_isRef: truev_isShallow: false_rawValue: Proxy(Object) {getRouteBaseName: ƒ, resolveRoute: ƒ, localePath: ƒ, localeRoute: ƒ, localeLocation: ƒ, …}_value: Proxy(Object) {getRouteBaseName: ƒ, resolveRoute: ƒ, localePath: ƒ, localeRoute: ƒ, localeLocation: ƒ, …}value: (...)[[Prototype]]: Object[[Prototype]]: Object name="home" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="home" name="home" ... > at <BaseTransition mode="out-in" appear=false persisted=false ... > at <Transition name="layout" mode="out-in" > at <NuxtLayout> at <App key=3 > at <NuxtRoot> when i inspect i found my self still in auth layout it only gets fixed when i push the navigateTo with external is true which doesnt make sense for me
Zeeeth
Zeeeth•9mo ago
How your App.vue look?
NT Diesel
NT DieselOP•9mo ago
this is my app.vue 
<template>
    <div>
        <Teleport to="body">
            <div
                class="absolute top-0 left-0 w-full h-full bg-FrameTwo flex items-center justify-center z-50"
                v-if="Loading"
            >
                <p>جاري التحميل</p>
            </div>
        </Teleport>
        <NuxtLayout>
            <NuxtPage />
            <NuxtLoadingIndicator />
            <UNotifications />
        </NuxtLayout>
    </div>
</template>
<template>
    <div>
        <Teleport to="body">
            <div
                class="absolute top-0 left-0 w-full h-full bg-FrameTwo flex items-center justify-center z-50"
                v-if="Loading"
            >
                <p>جاري التحميل</p>
            </div>
        </Teleport>
        <NuxtLayout>
            <NuxtPage />
            <NuxtLoadingIndicator />
            <UNotifications />
        </NuxtLayout>
    </div>
</template>
@Zeeethany clue ? hmmm it seems when i force to external with true it works weired how can i pause the middleware till the hydration is ended ? No updates till now when i sklip the middleware on hydrating using if(useNuxtApp().isHydrating) return it no longer now send the request at all
Orbviox
Orbviox•9mo ago
@NT Diesel if your issue is still persisting, it might help to provide to reproduction
NT Diesel
NT DieselOP•9mo ago
@Orbviox sure I will do it today no here u go https://codesandbox.io/p/github/PT-Mohamed-Hussein/error-reporduction/main?import=true this is the code sand box this is the link of the site https://qwks9x-3000.csb.app/auth/login when u access to the index directly it works fine but when u access to the /auth/login and the middle ware redirect u it doesnt change the layout which appear from the background color the background color of the auth layout is white while of the home is red when u get redirect the background will still white while it suppose to be red while the text ie the page content is changing while if i removed the wait or any request from the middleware it will works perfectly fine issue still presist even when i remove the transition whole code shown in the sandbox i just posted its just new nuxt app issue is coming when i do any thing used async data like fetch api or timeout when i removed both it works perfectly use this link https://qwks9x-3000.csb.app/auth/login in the sandbox its bugged idk why is it woked ? i dont know whats wrong with codesandbox i will sen u the link of the repo its public
NT Diesel
NT DieselOP•9mo ago
https://github.com/PT-Mohamed-Hussein/error-reporduction
GitHub
GitHub - PT-Mohamed-Hussein/error-reporduction
Contribute to PT-Mohamed-Hussein/error-reporduction development by creating an account on GitHub.
NT Diesel
NT DieselOP•8mo ago
here u go sry for remention i just updated something in the repo What if i used pinia presisted state and send to back end the accesstoken from pinia store in the body of request instead of getting it from cookies And allow the request to be done on the server side I think this will be good I will give it a try I managed tk solve it using pinia presisted stTe And send the token in the body during ssr
Want results from more Discord servers?
Add your server