uheader :open not working
I am using UHeader in nuxtUI pro. I want to toggle the open state programatically:
<UHeader
title="title"
mode="slideover"
:open="localeMenuOpen">
I have a constant defined:
const localeMenuOpen = ref(false)
which I set to false when I select one of the items:
const setLocale = (code: string) => {
console.log('changing locale to: ' + code + '')
locale.value = code
localeMenuOpen.value = false
}
It does not close the menu when I select one item. What am I missing?
3 Replies
Hi @Alex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not mention an
The
open or :open prop for the UHeader component in Nuxt UI Pro. According to the official documentation, the UHeader component does not support controlling its open state programmatically via an open prop or v-model:open. The available props and slots are for customizing the title, menu, mode, and toggle button, but there is no documented way to control the menu's open state directly through a prop like open or v-model:open UHeader Usage UHeader Mode.
This is different from components like USlideover, UModal, or UDrawer, which explicitly support open state control via v-model:open or an open prop Slideover Control Open State Drawer Control Open State Modal Control Open State.
If you need to programmatically control the open state of a menu, you may need to use a different component (such as USlideover, UModal, or UDrawer) or implement a custom solution. If you believe this should work, please double-check the documentation for any recent updates or consider opening an issue on the Nuxt UI Pro GitHub repository.
Summary:The
UHeader component does not support an open or v-model:open prop for programmatic control of its menu state, based on the current documentation. This is likely why your approach is not working.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@822057189556486186> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
The documentation mentions an "open" property:
https://ui.nuxt.com/components/header