N
Nuxt•2mo ago
overthinkerrrr

Issue when trying to add page transitions

I'm looking for help regarding page transitions in Nuxt. According to the Nuxt documentation, smooth page transitions can be achieved by setting the page transition properties. However, I've noticed that when loading the app or reloading the page, the transition effect does not occur. How can I resolve this issue or manually trigger the transition effect? Any insights or solutions would be appreciated!!!! I’ve tried: 
---app.vue---
<template>
      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }"/>
</template>

---index.vue---
definePageMeta({
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    appear: true,
  }
});
---app.vue---
<template>
      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }"/>
</template>

---index.vue---
definePageMeta({
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    appear: true,
  }
});
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @overthinkerrrr. 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 information provided in the knowledge sources, I can offer some insights and potential solutions to your issue with page transitions in Nuxt. The behavior you're experiencing, where the transition effect doesn't occur on initial load or page reload, is actually expected. This is because page transitions are designed to work between route changes, not on the initial page load or refresh. However, there are a few approaches you can try to address this: 1. Use layoutTransition instead of pageTransition: According to the Nuxt documentation on transitions, you can use layout transitions which will apply when changing layouts. This might help with the initial load issue. 2. Use the experimental View Transitions API: Nuxt has experimental support for the View Transitions API, which might provide a solution to your problem. You can enable this in your nuxt.config.ts file: 
   export default defineNuxtConfig({
     experimental: {
       viewTransition: true
     }
   })
   
   export default defineNuxtConfig({
     experimental: {
       viewTransition: true
     }
   })
Then, you can enable view transitions globally or on a per-page basis. For example, in your app.vue: 
   <template>
     <NuxtPage :transition="{
       name: 'page',
       mode: 'out-in'
     }" />
   </template>
   
   <template>
     <NuxtPage :transition="{
       name: 'page',
       mode: 'out-in'
     }" />
   </template>
Or in your page component: 
   <script setup>
   definePageMeta({
     pageTransition: {
       name: 'page',
       mode: 'out-in'
     },
     viewTransition: true
   })
   </script>
   
   <script setup>
   definePageMeta({
     pageTransition: {
       name: 'page',
       mode: 'out-in'
     },
     viewTransition: true
   })
   </script>
Note that this feature is experimental and may have some limitations or issues. 3. Use JavaScript hooks: For more control over the transition, you can use JavaScript hooks. This allows you to create custom transitions, which might help with the initial load issue. Here's an example from the Nuxt documentation on JavaScript hooks: 
   <script setup lang="ts">
   definePageMeta({
     pageTransition: {
       name: 'custom-flip',
       mode: 'out-in',
       onBeforeEnter: (el) => {
         console.log('Before enter...')
       },
       onEnter: (el, done) => {},
       onAfterEnter: (el) => {}
     }
   })
   </script>
   
   <script setup lang="ts">
   definePageMeta({
     pageTransition: {
       name: 'custom-flip',
       mode: 'out-in',
       onBeforeEnter: (el) => {
         console.log('Before enter...')
       },
       onEnter: (el, done) => {},
       onAfterEnter: (el) => {}
     }
   })
   </script>
You could potentially use these hooks to manually trigger a transition effect on initial load. 4. Consider browser behavior: It's worth noting that there's a known issue related to scroll behavior and transitions, especially with browser back/forward actions. This has been addressed in a recent fix, as mentioned in this GitHub pull request. Ensuring you're using the latest version of Nuxt might help with some transition-related issues. If these solutions don't fully resolve your issue, you might want to create a minimal reproduction of the problem and open a discussion on the Nuxt GitHub repository. The Nuxt community is generally very helpful and might be able to provide more specific guidance based on your exact setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@308122633927393280> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?