Header toogle menu not working in an Intertia app (useRoute still being used)

[skattabrain]

Environment

Nuxt v3.1.0

Is this bug related to Nuxt or Vue?

Vue

Version

v3.1.0

Reproduction

Not sure how to share out an intertia/laravel app.

Description

I was able to move forward with the Intertia JS improvements with Links, however... I'm trying to use the Header component and the toggle isn't working. I can see in the header.vue component that useRoute is being used, and it' causing the app to not open and close the menu correctly.

I can see it opening for a flash, then closed. I tried doing something manually with watching for the update:open, but I can see this is not the solution... I immediately had issues closing and losing the link focus trap when the menu appears.

I'm using Nuxt UI Pro v3.1.0 - I'm about to purchase a liceense so I can confirm this works with SSR enabled, but I'm blocked with this basic implemention.

    <UApp>
      <UHeader mode="drawer">
        <template #title>
          <ApplicationLogo class="h-6 w-auto" />
        </template>

        <UNavigationMenu :items="items" />

        <template #right>
          <UColorModeSelect />
        </template>

        <template #body>
          <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
        </template>
      </UHeader>
</UApp>

I can see this will be a problem with more components...

Additional context

No response

Logs

[benjamincanac]

This shouldn't be an issue as we stub the useRoute composable for inertia: https://github.com/nuxt/ui/blob/v3/src/runtime/inertia/stubs.ts#L16

Did you set the inertia: true option in your vite.config.ts? https://ui.nuxt.com/getting-started/installation/pro/vue#inertia

[AlejandroAkbal]

It’s happening to me too with inertia true

[romhml]

This is related to the Link component for inertia rendering an empty link. It'll be fixed by #3989.