Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
evgenii-code opened this issue May 28, 2024 · 2 comments
Open

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

evgenii-code opened this issue May 28, 2024 · 2 comments

Comments

@evgenii-code
Copy link

evgenii-code commented May 28, 2024

Environment

  • Operating System: Linux
  • Node Version: v18.20.3
  • Nuxt Version: 2.17.3
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: [email protected]
  • Builder: webpack
  • User Config: head, components, bridge, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
  • Runtime Modules: -
  • Build Modules: (), @nuxt/[email protected]

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

<template>
  <div>
    <button @click="navigateToTodos">navigateTo</button>
  </div>
</template>

<script lang="ts" setup>
const navigateToTodos = async () => {
  alert(1);

  await navigateTo('/todos');

  alert(3)
};
</script>

pages/todos/index.vue

<template>
  <div>
    Todos
  </div>
</template>

<script lang="ts" setup>
if (process.client) {
  alert(2);
}
</script>

Additional context

No response

Logs

No response

@wattanx
Copy link
Collaborator

wattanx commented Jun 6, 2024

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants