\n \u003C/UFormField>\n\u003C/template>\n```\n[Here](https://skrinshoter.ru/vSpJnffwygq) is video demonstration :)\n\n### Description\n\n`placeOpen.value = true` is not opening dropdown after fetching places.",[2867,2870,2873],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"v3","49DCB8",{"name":2874,"color":2875},"triage","ffffff",2724,"nuxt","ui","open","UInputMenu property OPEN not working properly","2024-11-23T20:32:41Z","https://github.com/nuxt/ui/issues/2724",0.68226266,{"description":2885,"labels":2886,"number":2889,"owner":2877,"repository":2878,"state":2879,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.12.2\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@9.10.0\n- Builder: -\n- User Config: compatibilityDate, future, modules, extends, nuxtHubRateLimit, icon, runtimeConfig, hub, devtools\n- Runtime Modules: @nuxthub/core@0.7.32, @nuxt/ui@2.18.7, @nuxt/fonts@0.10.0, @vueuse/nuxt@11.1.0, radix-vue/nuxt, nuxt-auth-utils@0.4.4, nuxthub-ratelimit@1.0.4, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules: -\n------------------------------\n\n### Version\n\n2.18.7\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-j4n37h?file=app.vue\n\n### Description\n\nI've found a rather rare bug, the first character gets skipped when we're using the `@input` event on `UTextarea` component. Using a watch on the v-model value works fine\n\n\n### Additional context\n\n\n\n### Logs\n\n_No response_",[2887,2888],{"name":2868,"color":2869},{"name":2874,"color":2875},2414,"Bug: UTextarea skips first input with the @input handler","2024-10-18T06:02:09Z","https://github.com/nuxt/ui/issues/2414",0.6985099,{"description":2895,"labels":2896,"number":2902,"owner":2877,"repository":2878,"state":2879,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Description\n\nI believe we should be able to collapse elements from left to right and invert them using the UCollapsible component.\n\n### Additional context\n\n_No response_",[2897,2900,2901],{"name":2898,"color":2899},"enhancement","a2eeef",{"name":2871,"color":2872},{"name":2874,"color":2875},3202,"Horizontal collapse support","2025-02-12T21:08:31Z","https://github.com/nuxt/ui/issues/3202",0.698776,{"description":2908,"labels":2909,"number":2914,"owner":2877,"repository":2878,"state":2915,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.12.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/devtools@1.6.4, @nuxt/ui@2.20.0, @vueuse/nuxt@12.2.0, @vueuse/motion/nuxt@2.2.6, @nuxtjs/device@3.2.4, @nuxt/image@1.8.1, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @vite-pwa/nuxt@0.10.6, nuxt-snackbar@1.1.2, nuxt-gtag@3.0.2, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n no reproduction\n\n### Description\n\nI notice there's a syntax error in the code;\nThe error is coming from a syntax error in the Headless UI Vue component code. Specifically, there's an unexpected semicolon in this line: \n(0,;__vite_ssr_import_5__.match)(i.value,{\nThis appears to be a build/compilation issue with the Headless UI Vue component. Let me check if there are any Headless UI Vue dependencies in the package.json.\n\nThe error appears when using nuxt v3.15.0 \nWith the previous \"nuxt\": \"3.14.1592\", no error. I 'm not sure if i should fill the bug Report here or in Nuxt directly!\n\n\n### Additional context\n\nUnexpected token ';'\n\n function g(e=\"\"){return e.split(/\\s+/).filter(t=>t.length>1)}let R=Symbol(\"TransitionContext\");var pe=(a=>(a.Visible=\"visible\",a.Hidden=\"hidden\",a))(pe||{});function me(){return (0,__vite_ssr_import_0__.inject)(R,null)!==null}function Te(){let e=(0,__vite_ssr_import_0__.inject)(R,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}function ge(){let e=(0,__vite_ssr_import_0__.inject)(N,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}let N=Symbol(\"NestingContext\");function L(e){return\"children\"in e?L(e.children):e.value.filter(({state:t})=>t===\"visible\").length>0}function Q(e){let t=(0,__vite_ssr_import_0__.ref)([]),a=(0,__vite_ssr_import_0__.ref)(!1);(0,__vite_ssr_import_0__.onMounted)(()=>a.value=!0),(0,__vite_ssr_import_0__.onUnmounted)(()=>a.value=!1);function s(n,r=__vite_ssr_import_6__.RenderStrategy.Hidden){let l=t.value.findIndex(({id:f})=>f===n);l!==-1&&((0,__vite_ssr_import_5__.match)(r,{[__vite_ssr_import_6__.RenderStrategy.Unmount](){t.value.splice(l,1)},[__vite_ssr_import_6__.RenderStrategy.Hidden](){t.value[l].state=\"hidden\"}}),!L(t)&&a.value&&(e==null||e()))}function h(n){let r=t.value.find(({id:l})=>l===n);return r?r.state!==\"visible\"&&(r.state=\"visible\"):t.value.push({id:n,state:\"visible\"}),()=>s(n,__vite_ssr_import_6__.RenderStrategy.Unmount)}return{children:t,register:h,unregister:s}}let W=__vite_ssr_import_6__.Features.RenderStrategy,he=(0,__vite_ssr_import_0__.defineComponent)({props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s,expose:h}){let n=(0,__vite_ssr_import_0__.ref)(0);function r(){n.value|=__vite_ssr_import_2__.State.Opening,t(\"beforeEnter\")}function l(){n.value&=~__vite_ssr_import_2__.State.Opening,t(\"afterEnter\")}function f(){n.value|=__vite_ssr_import_2__.State.Closing,t(\"beforeLeave\")}function S(){n.value&=~__vite_ssr_import_2__.State.Closing,t(\"afterLeave\")}if(!me()&&(0,__vite_ssr_import_2__.hasOpenClosed)())return()=>(0,__vite_ssr_import_0__.h)(Se,{...e,onBeforeEnter:r,onAfterEnter:l,onBeforeLeave:f,onAfterLeave:S},s);let d=(0,__vite_ssr_import_0__.ref)(null),y=(0,__vite_ssr_import_0__.computed)(()=>e.unmount?__vite_ssr_import_6__.RenderStrategy.Unmount:__vite_ssr_import_6__.RenderStrategy.Hidden);h({el:d,$el:d});let{show:v,appear:A}=Te(),{register:D,unregister:H}=ge(),i=(0,__vite_ssr_import_0__.ref)(v.value?\"visible\":\"hidden\"),I={value:!0},c=(0,__vite_ssr_import_1__.useId)(),b={value:!1},P=Q(()=>{!b.value&&i.value!==\"hidden\"&&(i.value=\"hidden\",H(c),S())});(0,__vite_ssr_import_0__.onMounted)(()=>{let o=D(c);(0,__vite_ssr_import_0__.onUnmounted)(o)}),(0,__vite_ssr_import_0__.watchEffect)(()=>{if(y.value===__vite_ssr_import_6__.RenderStrategy.Hidden&&c){if(v.value&&i.value!==\"visible\"){i.value=\"visible\";return}(0,;__vite_ssr_import_5__.match)(i.value,{[\"hidden\"]:()=>H(c),[\"visible\"]:()=>D(c)})}});let j=g(e.enter),M=g(e.enterFrom),X=g(e.enterTo),_=g(e.entered),Y=g(e.leave),Z=g(e.leaveFrom),ee=g(e.leaveTo);(0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{if(i.value===\"visible\"){let o=(0,__vite_ssr_import_3__.dom)(d);if(o instanceof Comment&&o.data===\"\")throw new Error(\"Did you forget to passthrough the ref to the actual DOM node?\")}})});function te(o){let E=I.value&&!A.value,p=(0,__vite_ssr_import_3__.dom)(d);!p||!(p instanceof HTMLElement)||E||(b.value=!0,v.value&&r(),v.value||f(),o(v.value?(0,__vite_ssr_import_7__.transition)(p,j,M,X,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&l()}):(0,__vite_ssr_import_7__.transition)(p,Y,Z,ee,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&(L(P)||(i.value=\"hidden\",H(c),S()))})))}return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watch)([v],(o,E,p)=>{te(p),I.value=!1},{immediate:!0})}),(0,__vite_ssr_import_0__.provide)(N,P),(0,__vite_ssr_import_2__.useOpenClosedProvider)((0,__vite_ssr_import_0__.computed)(()=>(0,__vite_ssr_import_5__.match)(i.value,{[\"visible\"]:__vite_ssr_import_2__.State.Open,[\"hidden\"]:__vite_ssr_import_2__.State.Closed})|n.value)),()=>{let{appear:o,show:E,enter:p,enterFrom:V,enterTo:Ce,entered:ye,leave:be,leaveFrom:Ee,leaveTo:Ve,...U}=e,ne={ref:d},re={...U,...A.value&&v.value&&__vite_ssr_import_4__.env.isServer?{class:(0,__vite_ssr_import_0__.normalizeClass)([a.class,U.class,...j,...M])}:{}};return (0,__vite_ssr_import_6__.render)({theirProps:re,ourProps:ne,slot:{},slots:s,attrs:a,features:W,visible:i.value===\"visible\",name:\"TransitionChild\"})}}}),ce=he,Se=(0,__vite_ssr_import_0__.defineComponent)({inheritAttrs:!1,props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s}){let h=(0,__vite_ssr_import_2__.useOpenClosed)(),n=(0,__vite_ssr_import_0__.computed)(()=>e.show===null&&h!==null?(h.value&__vite_ssr_import_2__.State.Open)===__vite_ssr_import_2__.State.Open:e.show);(0,__vite_ssr_import_0__.watchEffect)(()=>{if(![!0,!1].includes(n.value))throw new Error('A \u003CTransition /> is used but it is missing a :show=\"true | false\" prop.')});let r=(0,__vite_ssr_import_0__.ref)(n.value?\"visible\":\"hidden\"),l=Q(()=>{r.value=\"hidden\"}),f=(0,__vite_ssr_import_0__.ref)(!0),S={show:n,appear:(0,__vite_ssr_import_0__.computed)(()=>e.appear||!f.value)};return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{f.value=!1,n.value?r.value=\"visible\":L(l)||(r.value=\"hidden\")})}),(0,__vite_ssr_import_0__.provide)(N,l),(0,__vite_ssr_import_0__.provide)(R,S),()=>{let d=(0,__vite_ssr_import_6__.omit)(e,[\"show\",\"appear\",\"unmount\",\"onBeforeEnter\",\"onBeforeLeave\",\"onAfterEnter\",\"onAfterLeave\"]),y={unmount:e.unmount};return (0,__vite_ssr_import_6__.render)({ourProps:{...y,as:\"template\"},theirProps:{},slot:{},slots:{...s,default:()=>[(0,__vite_ssr_import_0__.h)(ce,{onBeforeEnter:()=>t(\"beforeEnter\"),onAfterEnter:()=>t(\"afterEnter\"),onBeforeLeave:()=>t(\"beforeLeave\"),onAfterLeave:()=>t(\"afterLeave\"),...a,...y,...d},s.default)]},attrs:{},features:W,visible:r.value===\"visible\",name:\"Transition\"})}}});\n\n\n SyntaxError: Unexpected token ';'\n at new Script (node:vm:116:7)\n at createScript (node:vm:268:10)\n at Object.runInThisContext (node:vm:316:10)\n at ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:398:19)\n at ViteNodeRunner.directRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:381:16) \n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async ViteNodeRunner.cachedRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:206:14) \n at async ViteNodeRunner.dependencyRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:259:12)\n at async node_modules\\@headlessui\\vue\\dist\\headlessui.esm.js:23:32\n at async ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:399:5) \n\n### Logs\n\n```shell-script\n\n```",[2910,2911],{"name":2868,"color":2869},{"name":2912,"color":2913},"duplicate","cfd3d7",2972,"closed","Syntax error in the Headless UI Vue component code","2024-12-25T10:39:30Z","https://github.com/nuxt/ui/issues/2972",0.65408367,{"description":2921,"labels":2922,"number":2927,"owner":2877,"repository":2878,"state":2915,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Description\n\nI added type of array items. It's Work as well in web but i got error warn in IDE. I use Nuxt + NuxtUi 3 + TS\n\n\n\n\n\nFor items : \n```\nconst items = ref([\n { label: \"Your Order\", slot: \"header\", type: \"label\" },\n { label: \"Item1\" },\n ]);\n```",[2923,2926],{"name":2924,"color":2925},"question","d876e3",{"name":2871,"color":2872},3456,"DropdownMenuItem type","2025-03-28T17:41:59Z","https://github.com/nuxt/ui/issues/3456",0.66226226,{"description":2933,"labels":2934,"number":2937,"owner":2877,"repository":2878,"state":2915,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.7.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: ssr, imports, devtools, experimental, future, compatibilityDate, alias, runtimeConfig, devServer, typescript, app, css, modules, build, hooks, dayjs, ui\n- Runtime Modules: @nuxt/eslint@1.1.0, @vueuse/nuxt@12.7.0, @nuxt/test-utils/module@3.17.0, dayjs-nuxt@2.1.11, nuxt-svgo@4.0.14, @nuxt/ui@3.0.0-alpha.13, @pinia/nuxt@0.10.1, @pinia/colada-nuxt@0.0.5\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n@nuxt/ui@3.0.0-alpha.13\n\n### Reproduction\n\nno actions, no styles, no nothing\n\n### Description\n\nno actions, no styles, no nothing\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2935,2936],{"name":2868,"color":2869},{"name":2871,"color":2872},3386,"Nothing works","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3386",0.6638278,{"description":2943,"labels":2944,"number":2947,"owner":2877,"repository":2878,"state":2915,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Description\n\nIn v3, we seem to have lost any focus indication on Buttons. This looks intentional as I see `focus:outline-hidden` on the base. For a11y and good keyboard navigation, it's best practice to have a visual indication of focus: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#discernibleandpredictablekeyboardfocus\n\nIt seems we've taken a step backward from v2 in this regard. Was this intentional? Is the intent for users to add their own `focus-visible:*` classes via app config?",[2945,2946],{"name":2924,"color":2925},{"name":2871,"color":2872},3658,"Button Focus Indication","2025-03-24T09:50:12Z","https://github.com/nuxt/ui/issues/3658",0.667962,{"description":2953,"labels":2954,"number":2957,"owner":2877,"repository":2878,"state":2915,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nI noticed that using form validation in Nuxt UI is very simple: Add a schema to a `\u003CUForm>` component and then place `\u003CUFormGroup>`'s with the corresponding names.\n\nUnfortunately in Vue I never found a solution this simple. In fact e.g. the use of VeeValidate is very cumberstone and requires a lot of code.\n\nMight it be possible to refactor the form validation of Nuxt UI as a standalone Vue component that uses slots and provides pure functionality without styling?\n\nE.g. by providing the a \"Form\" component, that auto validated the state and providing the error messages in a reactive object, but most things are handled by the developer:\n\n```vue\n\u003CForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\" ref=\"form\">\n \u003Clabel for=\"email\">E-Mail\u003C/label>\n \u003Cinput name=\"email\" type=\"text\" v-model=\"state.email\" />\n \u003Cdiv v-if=\"form.errors.email\">{{ form.errors.email }}\u003C/div>\n\n \u003Cbutton type=\"submit\">Submit\u003C/button>\n\u003C/Form>\n```\n\nInstead of configuring how the form validates (e.g. on each change, only after pressing submit, etc) we could use states for each value like Angular does. There the form validates on each change but each value has multiple states like is-pristine, isDirty, isUntouched and by use of those values triggering the visibility of the error messages can be precisely handled. Example:\n\n```vue\n\u003CForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\" ref=\"form\">\n \u003Clabel for=\"email\">E-Mail\u003C/label>\n \u003Cinput name=\"email\" type=\"text\" v-model=\"state.email\" />\n \u003Cdiv v-if=\"form.errors.email && form.values.email.dirty\">{{ form.errors.email }}\u003C/div>\n\n \u003Cbutton type=\"submit\" :disabled=\"!form.isValid\">Submit\u003C/button>\n\u003C/Form>\n```",[2955,2956],{"name":2898,"color":2899},{"name":2871,"color":2872},2768,"Release form validation as standalone library","2024-12-16T09:47:15Z","https://github.com/nuxt/ui/issues/2768",0.676986,{"description":2963,"labels":2964,"number":2967,"owner":2877,"repository":2878,"state":2915,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\n\n- \"nuxt\": \"3.14.1592\",\n-\"vue\": \"3.5.13\",\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nWhen Put the `USelectMenu` inside `UModal` the USelectMenu's SearchInput does not get the focus at all\n\n### Description\n\nWhen Put the `USelectMenu` inside `UModal` the USelectMenu's SearchInput does not get the focus at all\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2965,2966],{"name":2868,"color":2869},{"name":2871,"color":2872},3475,"The searchInput of the USelectMenu doesn't work when put the USelectMenu inside a Modal","2025-03-07T13:06:29Z","https://github.com/nuxt/ui/issues/3475",0.6822796,{"description":2973,"labels":2974,"number":2978,"owner":2877,"repository":2878,"state":2915,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.16.1`\n- CLI Version: `3.23.1`\n- Nitro Version: `2.11.7`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`, `css`, `colorMode`, `build`, `runtimeConfig`, `app`, `lodash`, `vite`, `router`, `nitro`\n- Runtime Modules: `@pinia/nuxt@0.9.0`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/test-utils/module@3.17.2`, `@vueuse/nuxt@11.3.0`, `nuxt-countdown@1.2.0`, `nuxt-lodash@2.5.3`, `nuxt-monaco-editor@1.3.1`, `@nuxt/eslint@1.2.0`, `@nuxt/eslint@1.2.0`, `@nuxt/fonts@0.11.0`, `@nuxt/icon@1.11.0`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.2`, `@nuxt/test-utils@3.17.2`, `@nuxt/ui@3.0.1`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nervous-flower-vv52gy\n\n### Description\n\nActions template does not render in Alert\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2975,2976,2977],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},3950,"Alert","2025-04-21T16:25:55Z","https://github.com/nuxt/ui/issues/3950",0.68236995,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fLED_NiGbsPfRJKBypvr7Bo1UdJtRG8uMHSHsItZAxFw":-1},"/nuxt/ui/3316"]