Global transition with JS hooks

[BenjaminOddou]

Hello 👋,

I am trying to port my "vue syntax transition" to a more "nuxt friendly" solution. For now I have :

<script setup lang="ts">
const onBeforeLeave = (el) => {}
const onLeaver = (el, done) => {}
const onEnter = (el, done) => {}
const onAfterEnter = (el) => {}
</script>

<template>
        <router-view v-slot="{ Component }">
          <Transition
            mode="out-in"
            :css="false"
            @before-leave="onBeforeLeave"
            @leave="onLeave"
            @enter="onEnter"
            @after-enter="onAfterEnter"
          >
            <component :is="Component" />
          </Transition>
        </router-view>
</template>

that is working quite well. however, the following config coming from the doc doesn't seems to work in app.vue:

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

[danielroe]

definePageMeta only works in routes - so in your pages/ directory. You can pass those same properties directly to nuxtPage if you like - it accepts a transition prop.

[BenjaminOddou]

@danielroe not sure that this syntax with transition prop can help in my case 😕 :

[danielroe]

try defining the props in your setup function.

[BenjaminOddou]

@danielroe I think it could be great to have an example in the doc because even if the following syntax seems correct to me, it's not working 😅

<script setup lang="ts">
const onBeforeLeave = (_el) => {}
const onLeaver = (_el, done) => {}
const onEnter = (_el, done) => {}
const onAfterEnter = (_el) => {}
</script>

<template>
        <NuxtPage
          :css="false"
          :transition="{
            mode: 'out-in',
            onBeforeLeave: (_el : HTMLDivElement) => {
              onBeforeLeave(_el)
            },
            onLeave: (_el: HTMLDivElement, done: any) => {
              onLeave(_el, done)
            },
            onEnter: (_el: HTMLDivElement, done: any) => {
              onEnter(_el, done)
            },
            onAfterEnter: (_el: HTMLDivElement) => {
              onAfterEnter(_el)
            },
          }"
        />
</template>

[danielroe]

I was thinking more:

<script setup lang="ts">
const transitionProps = {
  mode: 'out-in',
  onBeforeLeave: (_el) => {},
  onLeave: (_el, done) => {},
  onEnter: (_el, done) => {},
  onAfterEnter: (_el) => {}
}

</script>

<template>
  <NuxtPage
    :css="false"
    :transition="transitionProps"
  />
</template>

[BenjaminOddou]

@danielroe unfortunately it's not working with your syntax 🧐 I have the following error :

Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'seeAll.querySelector')

The error is happening on the upcoming page (working fine with vue syntax)

[danielroe]

I don't think it's my syntax. I think it's the same issue as #13471.

[BenjaminOddou]

I don't think it's my syntax. I think it's the same issue as #13471.

@danielroe interesting 🤔 so global transitions with JS hooks aren't available for nuxt then. I think it can be great to have this feature otherwise maybe put a little warning in the doc not to use these JS transitions globally 🙂

[danielroe]

it's an upstream bug in vue. workaround at the moment is to await a nextTick().