N
Nuxt•2mo ago
MikeNewbon

NuxtUi SaaS template with nested layout/page transitions?

I want to have transitions between pages with a consistent top navigation, and a consistent side navigation with transitions on the docs page. Im struggling to find any information or get it working myself. The best I managed was a full layout transition when going to the docs page and then consistent page transitions, or consistent top-nav with a single layout and then the side navigation also transitions. How is this supposed to work?! https://codesandbox.io/p/github/mikenewbon/saas/main
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @MikeNewbon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, I can help you understand how to implement nested layouts with transitions in Nuxt. The key is to use nested routes with <NuxtPage> components rather than trying to use multiple layouts simultaneously. Solution: Nested Routes Approach The recommended approach is to create a parent page that acts as a "pseudo-layout" containing your shared sidebar, and use <NuxtPage> to render child routes. This is explained in the nested routes documentation. Here's how to structure it: Directory Structure: 
-| pages/
---| index.vue          # Home page with top nav
---| docs.vue           # Parent "layout" with sidebar
---| docs/
-----| index.vue        # Docs home
-----| getting-started.vue
-----| api.vue
-| pages/
---| index.vue          # Home page with top nav
---| docs.vue           # Parent "layout" with sidebar
---| docs/
-----| index.vue        # Docs home
-----| getting-started.vue
-----| api.vue
pages/docs.vue (acts as a layout with sidebar): 
<template>
  <div>
    <!-- Your sidebar navigation here -->
    <aside>
      <NuxtLink to="/docs">Overview</NuxtLink>
      <NuxtLink to="/docs/getting-started">Getting Started</NuxtLink>
    </aside>
    
    <!-- Child pages render here with transitions -->
    <main>
      <NuxtPage />
    </main>
  </div>
</template>
<template>
  <div>
    <!-- Your sidebar navigation here -->
    <aside>
      <NuxtLink to="/docs">Overview</NuxtLink>
      <NuxtLink to="/docs/getting-started">Getting Started</NuxtLink>
    </aside>
    
    <!-- Child pages render here with transitions -->
    <main>
      <NuxtPage />
    </main>
  </div>
</template>
Configure transitions in nuxt.config.ts: 
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: { name: 'layout', mode: 'out-in' }
  }
})
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: { name: 'layout', mode: 'out-in' }
  }
})
Add CSS for transitions in app.vue: 
<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>
<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>
How This Works 1. Top navigation stays consistent because it's in your main layout (default.vue) 2. Sidebar stays consistent on docs pages because it's in the parent docs.vue page 3. Only the nested content transitions when navigating between /docs/getting-started and /docs/api 4. Full layout transition occurs when navigating from home to docs (if you want this) This approach is confirmed by a Stack Overflow answer where a user solved a similar problem: "The solution is to use nested routes... we're using profile here as a page, but it acts like a layout, where we put a <NuxtPage> instead of a <slot>." Note: As mentioned in the transitions documentation, "If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a layout transition." ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@152169570218672130> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
MikeNewbon
MikeNewbonOP•2mo ago
Hey what worked! I had to move the navigation setup into the pseudo docs layout (page) but now the transitions work perfectly!

Did you find this page helpful?