nuxt / bridge

🌉 Experience Nuxt 3 features on existing Nuxt 2 projects
MIT License
273 stars 29 forks source link

`navigateTo` doesn't return promise, thus cannot be awaited #1226

Open evgenii-code opened 4 months ago

evgenii-code commented 4 months ago

Environment

Reproduction

Nuxt Bridge reproduction https://stackblitz.com/edit/nuxt-bridge-starter-nbqmvf?file=pages%2Findex.vue

Nuxt 3 reproduction https://stackblitz.com/edit/nuxt-starter-me3k42?file=pages%2Findex.vue

Describe the bug

Utility helper navigateTo does not return a promise, thus cannot be awaited.
The method router.push has the same behaviour. You may notice, that the app crashes on router.push('/').then(() => {}), because there is no .then in undefined

In this Nuxt Bridge reproduction I have tried to add await to the navigateTo, and second alert fires synchronously.

But in Nuxt 3, await makes the difference and second alert fires after navigation complete.

A little bit of code pages/index.vue ```Vue ``` pages/todos/index.vue ```Vue ```

Additional context

No response

Logs

No response

wattanx commented 3 months ago

The following workarounds are available

router.push(path, onCompleted)

In your reproduction environment, you could write

const pushToTodosWithAwait = async () => {
  showRouteName(1);

  router.push(route, () => {
    showRouteName(3);
  });
};
evgenii-code commented 3 months ago
router.push(path, onCompleted)

Yes, we are currently using this workaround in our app.
The downside is that the newer version of vue-router does not have an onComplete callback, if I'm not mistaken. We need to keep this in mind after the migration is complete.