watching route doesn't fire with composition api

[gregorvoinov]

hi, I want to watch the route to perform different transitions between the pages.

But when I'm using the new composition API I have problems with watching the route...

<router-view v-slot="{ Component }">
    <transition :name="transition_name" :mode="mode_type">
        <component :is="Component" />
    </transition>
</router-view>

and then this to watch the route, but it doesn't fire on route change

setup(){
      const route = useRoute()
      watch(
        () => route.path,
        path => {
             console.log(path)
        },
        { immediate: true }
      )
}

with the old way it works

export default {
    watch: {
      $route(to) {
          console.log(to.path)
      },
    }
}

What I'm missing?

[chenxch]

Perhaps you should use

setup(){
      const router = useRouter()
      watch(
        () => router.currentRoute.value,
        currentRoute=> {
             console.log(currentRoute.path)
        },
        { immediate: true }
      )
}

useRoute() returns the current route location. The reason why this.$route can be used in vue2 is because this points to the root, so the latest ones are obtained.

[chenxch]

import { useRoute } from "vue-router";

useRoute in Nuxt.js should be modified, not useRoute of vue-router

[chenxch]

Just use <NuxtPage> for wrapping.
Thanks again for your guidance @danielroe .

[gregorvoinov]

Oh man, thanks, I would never have figured that out with the import

the reason why I switched from <nuxtPage> to <vue-router> was that my transitions doesn't get updated accordingly.

nuxtpage https://codesandbox.io/s/misty-silence-3kwnik?file=/app.vue click on projects fades currentpage and slides new page (wrong behaviour)
vue-router https://codesandbox.io/s/happy-feistel-167g9i?file=/app.vue click on projects slides both pages (correct behaviour)

Do you have any idea why they behave differently?

[chenxch]

This may have something to do with the whole process. In Nuxtpage you will find that it uses the transition_name before the route is changed to complete the animation, while in router-view the route is changed first and the animation is completed according to the transition_name.

[gregorvoinov]

ah ok, thought nuxtPage is only a "simple" wrapper for router-view with the same behaviour (more or less ;)

Thank you so much for your help ;)