Nuxt•3mo ago

avoid transition between two pages with same layout

Hello, I have several pages that share the same layout, but when I'm navigating between those pages, the transition is triggered and the whole layout reloads, is there a way to avoid this ?

2 Replies

kapa.ai•3mo ago

Hi @Snoozie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To avoid transitions between pages that share the same layout in Nuxt, you can use the pageTransition and layoutTransition properties. Here's how you can disable these transitions: 1. You can disable transitions for specific routes by using definePageMeta in your page components:

<script setup lang="ts">
definePageMeta({
  pageTransition: false,
  layoutTransition: false
})
</script>

<script setup lang="ts">
definePageMeta({
  pageTransition: false,
  layoutTransition: false
})
</script>

This will disable both page and layout transitions for that specific page Disable Transitions (https://nuxt.com/docs/getting-started/transitions#disable-transitions). 2. If you want to disable transitions globally for all pages, you can do so in your nuxt.config.ts file:

export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

This will disable transitions for all pages in your application Disable Transitions (https://nuxt.com/docs/getting-started/transitions#disable-transitions). 3. If you're using the experimental View Transitions API, you can disable it for specific pages:

<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

This will only have an effect if you have enabled the experimental.viewTransition option in your Nuxt configuration Transition with NuxtPage (https://nuxt.com/docs/getting-started/transitions#transition-with-nuxtpage). By implementing one of these methods, you should be able to avoid the transition effect and prevent the layout from reloading when navigating between pages that share the same layout. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@414109446810370049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

avoid transition between two pages with same layout

Did you find this page helpful?