PageTransition JavaScript Hooks problem

Greetings. I ran into a problem when calling javascript transition hooks.

I have reproduced the issue here:

https://stackblitz.com/edit/nuxt-starter-6qvzci?file=pages/second.vue

Can you please tell me if I can assign global transitions for all pages, as it is implemented, for example, in vue router.

<router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" /> </transition> </router-view>

[mak33v]

Thank you for your answers, thanks to them I have implemented everything I wanted.

@jiblett1000 Thanks to your tip on these hooks, I implemented a java script logic for transitions:

// app.vue const nuxtApp = useNuxtApp() nuxtApp.hook('page:start', () => { .... }) nuxtApp.hook('page:finish', () => { .... })

@derz Your answer helped implement transition properties globally for all pages

[derz]

You could use a middleware to do that, for example:

export default defineNuxtRouteMiddleware((to, from) => {
    // don't overwrite default transition...
    if ( to.meta.pageTransition == null) {
        to.meta.pageTransition = {
            name: 'default-transition',
            mode: 'in-out',
        };
    }
});