Jan
Jan
PostsComments
NNuxt
Created by Jan on 12/16/2024 in #❓・help
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' }
    }
  },
})
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
6 replies