Description

Hi, I’m working on a Nuxt 3 project deployed on Vercel. I’m experiencing an unwanted white flash or layout flicker on navigation between pages, especially when using <NuxtLink> inside the navbar. The transition feels broken or unpolished.

I already use default Nuxt page transitions like this:

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

My app layout includes the navbar and footer outside of <NuxtPage /> like this:

<template>
  <NuxtLoadingIndicator />
  <AppNavbar />
  <div class="h-32" />
  <UContainer>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UContainer>
  <div class="h-32" />
  <AppFooter />
</template>

my index page on page/

   <template>
  <main class="min-h-screen">
    <div class="space-y-24">
      <HomeIntro />
      <HomePremiumService />
      <HomeWork />
      <HomeSocialLinks />
      <HomeFeaturedProjects />
      <HomeFeaturedArticles />
      <HomeTestimonials />
      <HomeContactCTA />
    </div>
  </main>
</template>

I’ve created a video demonstrating the issue I'm encountering with Nuxt. The video shows the flashing behavior when navigating between pages, even though I have set up transitions as expected.

Even though the transition is defined, navigation causes a brief white screen before the new content appears. It seems like the layout or components are unmounted/re-mounted unexpectedly.

What I’ve tried

• Using static assets (<NuxtImg>) with placeholder and blur.
• Moving layout elements inside Nuxt layouts.
• Ensuring no SSR hydration errors.
• Checked for large images or fonts causing flashes.
• Tried with nuxt@3.8.1, but got package warnings on glob@7.x.

Possible cause

It seems like <NuxtPage /> renders before layout is fully hydrated, or there's a delay with dynamic components (like useSeoMeta, runtime config, or <NuxtImg>).
Maybe the transition hook isn't synced with the component load.

Questions

• Is this a known issue with page transitions in Nuxt 3?
• Should layout or page transitions be handled differently to avoid this kind of visual glitch?
• Any workaround for a smoother visual transition without flicker?

Thanks in advance 🙏