Page transitions bad lifecycle ?

[benjaminrobinet]

Environment

• Operating System: Darwin
• Node Version: v18.12.1
• Nuxt Version: 3.0.0-rc.14
• Nitro Version: 1.0.0
• Package Manager: npm@8.19.2
• Builder: vite
• User Config: modules, postcss, image, css, vite
• Runtime Modules: @nuxt/image-edge@1.0.0-27809804.194d2d6
• Build Modules: -

Reproduction

Just use the javascript hooks of transitions, but here is my use case.

<template>
    <div>
        <NuxtLayout>
            <NuxtPage :transition="transition" />
        </NuxtLayout>
    </div>
</template>

<script setup>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

const layoutFooterEl = ref(null);

const transition = {
    mode: 'out-in',
    css: false,
    onLeave: (el, done) => {
        console.log('leave');

        gsap.to([el, layoutFooterEl.value], {
            opacity: 0,
            ease: 'none',
            duration: 0.3,
            onComplete: () => {
                console.log('leave complete');
                done();
            },
        });
    },
    onAfterLeave: () => {
        console.log('after leave');
    },
    onBeforeEnter: (el) => {
        console.log('before enter');

        gsap.set([el, layoutFooterEl.value], { opacity: 0, lazy: false });
    },
    onEnter: (el, done) => {
        console.log('enter');
        gsap.set([el, layoutFooterEl.value], { opacity: 0 });
        viewport.onResize();
        ScrollTrigger.refresh();

        lenis.value.scrollTo(0, { immediate: true });

        gsap.to([el, layoutFooterEl.value], {
            lazy: false,
            opacity: 1,
            ease: 'none',
            duration: 0.7,
            onComplete: done,
        });
    },
};

</script>

Describe the bug

On page transitions, the onMounted() hook is called before the page enter. Here is the lifecycle I have on the page transition:

app.vue:29 leave
page-2.vue:51 mounted
app.vue:34 leave complete
app.vue:44 before enter
app.vue:41 after leave
app.vue:48 enter

UPDATE: Also, the onUnmounted hook is called before the page finished the transition

Additional context

No response

Logs

No response

[benjaminrobinet]

(Similar to #13471)

[maximilliangeorge]

More relevant info here. This is an up stream bug in Vue. There is a PR claiming to fix this issue but it hasn't been merged for over a year :(

vuejs/core#5952 (comment)

[danielroe]

Let's track this upstream issue in #13471.