Close Popover after navigation-event (vue-router)

[ahoiroman]

Hello everybody,

I'd like to implement headlessui in my SPA. Now as vue-router does not perform a reload-event of the whole page, an open popover will remain open even after the user already clicked a link and navigated to a new page.

My question: How can I react to url change and close the popover accordingly?

[numeralsix]

Having similar issues. The Menu component does work in the way that you need it to, it closes when a menu item is clicked. We're also trying to use the flyout (popover) and mobile navigation menu examples (disclosure) and stuck on how to close them onNavigate().

Any guidance here? Is it best to try managing ourselves with the static prop mentioned in the docs or is there a smarter way to accomplish this.

Good info here #358 (comment)

[RayburnTrading]

I'm also interested in a solution here.

Rendering a PopoverButton as="router-link" to="/page2" does not work, it closes the Popover but does not behave correctly as it doesn't navigate anywhere. I guess we're losing the functionality of vue-router.

Rendering as="a" does close the PopOver but reloads the whole page so you lose vue-router's <router-link> functionality.

Rendering a default PopoverButton with an @click="navigate()" event also works but this is bad SEO right?? All navigation links being Buttons with no hrefs?

[Kiansa]

Did you find a better solution to keep the <router-link> and close that popover?

[MoonLabsUK]

Can you try a PopoverButton inside a router-link?

<li v-for="item in section.items" :key="item.name" class="flex"><router-link custom :to="item.href" v-slot="{ href, navigate }"><PopoverButton as="a" :href="item.href" @click="navigate" v-slot="{ active }">{{ item.name }}</PopoverButton> </router-link></li>