Global transition with JS hooks

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]

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

[danielroe]

I don’t think it’s my syntax. I think it’s the same issue as https://github.com/nuxt/framework/issues/3587.