Nuxt 3: How Do I Apply Transitions to a Single Landing Page?

Below is some background and a couple of recommendations to help troubleshoot the issue.

Why Page Transitions May Not Be Triggering

1. Route Change Requirement:
   Nuxt’s built‐in page transitions trigger during route changes. If your landing page is the only route (and no navigation occurs), then there’s no transition event to observe. The initial page load is rendered immediately, so the transition states may never be applied.

2. Transition Prop Versus Manual Wrapper:
   While Nuxt allows you to pass a transition object directly to , sometimes it’s more reliable to wrap your in a standard <Transition> component. This lets you control when the element transitions in or out, even if you have only one page.

Recommendations and Code Adjustments

1. Use a <Transition> Wrapper in Your Layout

Instead of relying on the NuxtPage’s built‐in transition prop, you might consider explicitly wrapping it in a <Transition> component. For example, in your default.vue layout:

VUECopied
<template>
  <div>
    <transition name="page" mode="default">
      <!-- NuxtPage will now be animated on route changes -->
      <NuxtPage />
    </transition>
    <NuxtLoadingIndicator color="#67d360" :throttle="0" />
  </div>
</template>

<style>
html,
body {
  background-color: black;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.page-enter-active,
.page-leave-active {
  transition: all 1.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

2. Consider Animating the Initial Load

If you do want an animation when your landing page first loads (even though it’s a single static route), you can trigger an animation on mount. One approach is to apply a CSS animation or a JavaScript trigger (using Vue’s lifecycle hooks). For example, you might have a CSS animation that targets an element with the .initial-load class, and then remove it after the animation completes.

VUECopied
<template>
  <div class="initial-load">
    <!-- Your landing page content -->
  </div>
</template>

<script>
export default {
  mounted() {
    // Remove the animation class after a delay
    setTimeout(() => {
      this.$el.classList.remove("initial-load");
    }, 1400); // match animation duration
  }
}
</script>

<style>
.initial-load {
  animation: fadeInBlur 1.4s ease-out;
}

@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(1rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
</style>

Summary

• No Route Change: Remember that page transitions in Nuxt are designed for route changes. With a single landing page, no navigation means no automatic transition.
• Explicit Transition: If you want to see an effect, wrap <NuxtPage> (or your landing page’s content) in a <Transition> component.
• Initial Load Animation: Consider adding an additional CSS or JavaScript-based animation if you need the landing page to animate on first display.

By applying one of these approaches, you should be able to see the desired animated effect even if your app consists only of a single root page.