\n \u003CUButton label=\"Delete\" @click=\"deleteItem\" />\n \u003CUButton label=\"Add\" @click=\"addItem\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction deleteItem() {\n const randomIndex = Math.floor(Math.random() * data.value.length);\n data.value.splice(randomIndex, 1);\n}\n\nfunction addItem() {\n data.value.push({\n id: Math.floor(Math.random() * 10000).toString(),\n });\n}\n\nconst data = ref([\n {\n id: \"4600\",\n },\n {\n id: \"4599\",\n },\n {\n id: \"4598\",\n },\n {\n id: \"4597\",\n },\n {\n id: \"4596\",\n },\n]);\n\u003C/script>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[1984,1987,1990],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"v3","49DCB8",{"name":1991,"color":1992},"triage","ffffff",3821,"nuxt","ui","open","Table is not reactive","2025-04-07T18:26:54Z","https://github.com/nuxt/ui/issues/3821",0.7149287,{"description":2002,"labels":2003,"number":2008,"owner":1994,"repository":1995,"state":1996,"title":2009,"updated_at":2010,"url":2011,"score":2012},"### Description\n\nI want to color certain dates according to a certain condition. Currently, there are two options available in the API: either unavailable or disabled. How do I implement this?",[2004,2007],{"name":2005,"color":2006},"question","d876e3",{"name":1988,"color":1989},3413,"UCalendar custom selecting dates","2025-02-27T11:25:46Z","https://github.com/nuxt/ui/issues/3413",0.7249538,{"description":2014,"labels":2015,"number":2017,"owner":1994,"repository":1995,"state":1996,"title":2018,"updated_at":2019,"url":2020,"score":2021},"### Description\n\nHow to make nuxt-ui-colors have a nonce in its style header?",[2016],{"name":2005,"color":2006},3395,"nuxt-ui-colors with nonce","2025-02-28T11:43:32Z","https://github.com/nuxt/ui/issues/3395",0.7303271,{"description":2023,"labels":2024,"number":2030,"owner":1994,"repository":1995,"state":1996,"title":2031,"updated_at":2032,"url":2033,"score":2034},"### Description\n\nCurrently, the Calendar component allows no date selection. Please add a property to make the date mandatory, ensuring it cannot be null.\n\n### Additional context\n\n_No response_",[2025,2028,2029],{"name":2026,"color":2027},"enhancement","a2eeef",{"name":1988,"color":1989},{"name":1991,"color":1992},3734,"Calendar - The Calendar must have a selected date.","2025-03-30T04:36:21Z","https://github.com/nuxt/ui/issues/3734",0.73338616,{"description":2036,"labels":2037,"number":2038,"owner":1994,"repository":1995,"state":1996,"title":2039,"updated_at":2040,"url":2041,"score":2042},"Currently, portal components (modals, popovers, etc.) are directly attached to the root of the body. It would be beneficial to allow specifying their destination within the configuration .This would provide greater control over rendering order and potential styling conflicts, especially in complex applications with open shadow Dom. \n\nFor instance, a developer might want to render a modal within a specific container to inherit styles or avoid interference with other elements on the page (I currently using Nuxt ui as a web component withing WordPress). \n\nThe proposed configuration option could be a CSS selector string, allowing for flexible targeting of any existing element in the DOM defaulting to 'body'. ",[],3687,"Allow specify portal destination for all portaled components","2025-03-26T06:11:46Z","https://github.com/nuxt/ui/issues/3687",0.7359767,{"description":2044,"labels":2045,"number":2049,"owner":1994,"repository":1995,"state":1996,"title":2050,"updated_at":2051,"url":2052,"score":2053},"### Description\n\n\n## 🔧 Current Behavior\n\nThe `deferInputValidation` parameter in `useFormField` is currently hardcoded in the `Input` component:\n\n```ts\nconst { emitFormBlur, emitFormInput, /* ... */ } = useFormField\u003CInputProps>(props, { \n deferInputValidation: false // Hardcoded\n})\n```\n\nThis limits flexibility, as consumers of the `Input` component cannot control validation timing behavior (e.g., validate on blur vs. validate on input).\n\n## ✅ Proposed Solution\n\nMake `deferInputValidation` configurable via a component prop:\n\n1. **Pass dynamic value to `useFormField`:**\n\n```ts\nuseFormField\u003CInputProps>(props, {\n deferInputValidation: props.deferInputValidation\n})\n```\n\n2. **Update the component props interface:**\n\n```ts\ndeferInputValidation?: boolean\n```\n\n---\n\n## 💡 Use Cases\n\n- **Delayed validation** for complex, interdependent form fields \n- **Immediate validation** for sensitive or critical fields \n- Flexibility for UX patterns like **\"validate-on-blur\"** or **\"validate-as-you-type\"**\n\n---\n\n## 🔁 Alternatives Considered\n\n- **Wrapper Component**: Adds unnecessary complexity \n- **Global Form-Level Config**: Less flexible than per-field control\n\n---\n\n## 🧪 Testing Impact\n\n- Covered by existing validation tests with both `true` and `false` cases\n\n---\n\n## 📚 Documentation\n\nRequires updates to:\n\n- Component prop API \n- Form validation best practices\n\n---\n\n## ⚙️ Why This Matters\n\nThis change supports **Inversion of Control** — empowering component consumers to control validation timing based on specific UX needs.\n```\n\n### Additional context\n\n_No response_",[2046,2047,2048],{"name":2026,"color":2027},{"name":1988,"color":1989},{"name":1991,"color":1992},3810,"[UForm] Feature Request: Make deferInputValidation Configurable in useFormField","2025-04-06T16:27:47Z","https://github.com/nuxt/ui/issues/3810",0.73628205,{"description":2055,"labels":2056,"number":2060,"owner":1994,"repository":1995,"state":1996,"title":2061,"updated_at":2062,"url":2063,"score":2064},"### Description\n\nThere is currently no easy way to know what state the modal is in. Adding a `toggle` method would make life very much easier.\n\nI'm willing to make a PR\n\n### Additional context\n\n_No response_",[2057,2058,2059],{"name":2026,"color":2027},{"name":1988,"color":1989},{"name":1991,"color":1992},3720,"feat: add toogle for useOverlay","2025-03-28T17:40:33Z","https://github.com/nuxt/ui/issues/3720",0.7384513,{"description":2066,"labels":2067,"number":2072,"owner":1994,"repository":1995,"state":1996,"title":2073,"updated_at":2074,"url":2075,"score":2076},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn certain situations, it’s necessary to display a loading indicator, but not all components currently include this feature. It would be helpful to have a **composable** and **directive** for such cases.\n\n### How it should work\n\nA semi-transparent overlay should be rendered over the target, containing a loading icon.\n\n### How to use\n\n#### Composable `useLoading`\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst layout = ref\u003CHTMLDivElement | null>(null)\nconst { start, stop } = useLoading(layout)\n\nfunction startLoading() {\n start()\n setTimeout(stop, 2000)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv ref=\"layout\">\n ...\n \u003C/div>\n \u003CUButton @click=\"startLoading\">Show loading\u003C/UButton>\n\u003C/template>\n```\n\n#### Directive `v-loading`\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst isLoading = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-loading=\"isLoading\">\n ...\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\nHere’s how it’s implemented in other libraries:\n\n- [Element Plus - Loading](https://element-plus.org/en-US/component/loading.html) \n- [Vue Loading](https://coffcer.github.io/vue-loading/)",[2068,2071],{"name":2069,"color":2070},"feature","A27AF6",{"name":1988,"color":1989},2668,"Proposal to add a loading component","2024-11-18T12:01:05Z","https://github.com/nuxt/ui/issues/2668",0.7446354,{"description":2078,"labels":2079,"number":2082,"owner":1994,"repository":1995,"state":2083,"title":2084,"updated_at":2085,"url":2086,"score":2087},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.20.0\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.1.37\n- Builder: -\n- User Config: components, css, extends, modules, ui, supabase, i18n, app, mapbox, runtimeConfig, compatibilityDate\n- Runtime Modules: nuxt-mapbox@1.6.1, @nuxt/image@1.9.0, @nuxt/ui@3.0.0-alpha.10, @nuxtjs/supabase@1.4.5, @vueuse/nuxt@10.11.1, @nuxtjs/i18n@8.5.6, @vueuse/motion/nuxt@2.2.6 \n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-wood-ntyxty\n\n### Description\n\nwhen a child item at the second level has more than three levels of nested children, the collapse button for that second-level item stops working.\n\nI'm using the following code snippet:\nIs this a known limitation of the UNavigationMenu component, or could it be a bug?\n\nI would greatly appreciate any guidance on how to resolve this issue and ensure the collapse \nTypeScript\n```\n\u003Cscript setup lang=\"ts\">\n const items = ref([\n {\n label: 'Home',\n icon: 'i-tabler-home',\n description: 'Fully styled and customizable components for Nuxt.',\n children: [\n {\n label: 'Introduction 2',\n description: 'Fully styled and customizable components for Nuxt.',\n icon: 'i-lucide-house',\n children: [\n {\n label: 'Getting Started 3',\n description: 'Learn how to get started with Reka UI.',\n icon: 'i-tabler-star',\n to: '/',\n },\n {\n label: 'Installation 3',\n description: 'Learn how to get started with Reka UI in your Nuxt project.',\n icon: 'i-lucide-house',\n to: '/',\n },\n ],\n },\n ],\n },\n ])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n color=\"neutral\"\n :ui=\"{\n link: 'group relative flex items-center gap-2 px-3 py-2 font-bold rounded-md text-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',\n }\"\n />\n\u003C/template>\n\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2080,2081],{"name":1985,"color":1986},{"name":1988,"color":1989},3069,"closed","UNavigationMenu I'm facing an issue with the collapse functionality of my nested navigation menu.","2025-01-25T12:56:13Z","https://github.com/nuxt/ui/issues/3069",0.70138216,{"description":2089,"labels":2090,"number":2094,"owner":1994,"repository":2095,"state":2083,"title":2096,"updated_at":2097,"url":2098,"score":2099},"- [x] `Nuxt`\n- [x] `Studio`\n- [x] logo only",[2091],{"name":2092,"color":2093},"design","00bd6f",780,"nuxt.com","Uniformize logos with same size","2023-09-05T08:18:35Z","https://github.com/nuxt/nuxt.com/issues/780",0.7044155,["Reactive",2101],{},["Set"],["ShallowReactive",2104],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"dBq_XAs89XgZMBDtQ-q-8GAg9GKV-Ace0yHsGdP1eFc":-1},"/nuxt/nuxt.com/1104"]