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

[evgenii-code]

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: npm@10.2.3
• Builder: webpack
• User Config: head, components, bridge, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/bridge@3.2.1

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]

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]

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.

[mrleblanc101]

The return type of navigateTo is supposed to be a promise:

function navigateTo(
to: RouteLocationRaw | undefined | null,
options?: NavigateToOptions
) => Promise<void | NavigationFailure | false> | false | void | RouteLocationRaw

But I get this error when I try to chain a .then()

Property 'then' does not exist on type 'string | false | void | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | >Promise<false | void | NavigationFailure>'.
Property 'then' does not exist on type 'string'.

With this code:

navigateTo(localePath('index')).then(() => {
    $toast.trigger('success', {
        autoClose: true,
        closeOnClick: true,
        closeButton: true,
        isLoading: false,
        transition: 'bounce',
        contentProps: {
            content: t('Successfully applied'),
        },
    });
});