NuxtN
Nuxt•13mo ago
Jan

disabling page transitions between subpages

so, I'm once again on a point where I need help with nuxt 😅
what I have:
a website project with simple page transitions
structure:
index
[uid]
projects/[uid]
what I want:
when navigation between project detail pages (project/[uid]) I want to disable page transitions, because I want to move elements custom with gsap flip
but all other navigations should keep the simple page transition
what have I tried (on project/[uid]):
definePageMeta({
  pageTransition: {
    onAfterLeave: () => {
      handleAfterLeave()
    },
    onAfterEnter: () => {
      handleAfterEnter()
    },
  },
  middleware(to, from) {
    console.log(to, from)
    if (to.name === 'projects-uid' && from.name === 'projects-uid' && to.meta.pageTransition) {
      // this doesn't work really when going back to other pages
      to.meta.pageTransition = false
      // this works better, but still has issues and doesn't work correct on all navigations
      to.meta.pageTransition = { name: '' }
    } else {
      to.meta.pageTransition = { name: 'page' }
    }
  },
})

would love some help
Was this page helpful?