useRoute() in 'vue-router' is working but not in nuxt.

Environment

• Operating System: Darwin
• Node Version: v18.7.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: modules, css, colorMode, vite, app
• Runtime Modules: nuxt-windicss@2.5.0, @pinia/nuxt@0.3.1, @nuxtjs/color-mode@3.1.4, @nuxt/[e-mail]85542
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-izskfd?file=components/Book.vue

Describe the bug

useRoute(), nuxt default provided function, has previous route information, and not updated on moving page.

But using import { useRoute } from vue-router, resolve all problems.

Is there any point I missed?

Additional context

rc.6 doesn’t have problems but rc.8 has.

It just occurred as soon as updating from rc.6 to rc.8

Logs

No response

[ValJed]

Hi there ! Tiny ping because I’m also experiencing this issue. Nuxt version 3.0.0-rc.11

Code example:

// experiences/index.js

<template>
  <div>
    <h1>Experiences</h1>
    <ul>
      <li>
        <NuxtLink to="experiences/experience1">
          <div>
            <img src="/images/exp1.png" />
          </div>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="experiences/experience2">
          <img src="/images/exp2.png"  />
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

// experiences/[experience].js
<script setup>
import experiences from '@/data/experiences'
import { useRoute } from 'vue-router' // With this line it's working as expected

const route = useRoute()

const current = route.params.experience // This param is loaded once but never updated while the route changes
const experience = experiences[current] // So this variable always stays the same
</script>

For me too, the only way of making it work is to import manually import { useRoute } from 'vue-router'. When counting on the auto import it simply doesn’t work.

PS: Note that the problem doesn’t come, at least in my case, from destructuring.

Thanks!

[Ischafak]

|@danielroe hi, in my application i am changing page with NuxtLink and i am using useRoute in footer. when first load the page useRoute data works very well but after i change page fullpath doesnt change. How can i fix this can anyone help me please?

<script setup>
const route = useRoute()

const isPricing = computed(() => {
  return route.fullPath === "/blablabla"
})
</script>

“nuxt”: “3.0.0-rc.11”,