\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```",[1998,2001],{"name":1999,"color":2000},"enhancement","a2eeef",{"name":2002,"color":2003},"v3","49DCB8",2768,"Release form validation as standalone library","2024-12-16T09:47:15Z","https://github.com/nuxt/ui/issues/2768",0.7108788,{"description":2010,"labels":2011,"number":2015,"owner":1988,"repository":1989,"state":1990,"title":2016,"updated_at":2017,"url":2018,"score":2019},"### Description\n\nIt would be good to allow to specify the default props for the components like you can set a custom default \"UI Config\" in `app.config.ts`.\r\n\r\nFor example I want the `UButton` to always use the variant \"outline\" as default instead \"solid\" without having to specify each time is used.\r\n\r\nThis could be added in the `app.config.ts` like `uiProps` or add \"props\" key to to each component in \"ui\".\r\n\r\nHope this can be implemented, thanks!.\n\n### Additional context\n\n_No response_",[2012],{"name":2013,"color":2014},"question","d876e3",2248,"Default props","2024-09-25T07:41:35Z","https://github.com/nuxt/ui/issues/2248",0.7138031,{"description":2021,"labels":2022,"number":2025,"owner":1988,"repository":2026,"state":1990,"title":2027,"updated_at":2028,"url":2029,"score":2030},"Resolves #385 \r\nFixes #412 ",[2023],{"name":1985,"color":2024},"ff281a",412,"nuxt.com","When changing color mode, editor slots are broken","2023-06-06T12:14:51Z","https://github.com/nuxt/nuxt.com/issues/412",0.7162716,{"description":2032,"labels":2033,"number":2025,"owner":1988,"repository":2035,"state":1990,"title":2036,"updated_at":2037,"url":2038,"score":2030},"### Environment\n\n```\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.5\n- Package Manager: bun@1.2.4\n- Builder: -\n- User Config: compatibilityDate, css, app, modules, htmlValidator, nitro, postcss, image, prismic, runtimeConfig, site, turnstile, vite\n- Runtime Modules: @nuxt/image@1.9.0, @nuxt/ui@3.0.0-beta.3, @nuxtjs/device@3.2.4, @nuxtjs/html-validator@2.1.0, @nuxtjs/prismic@4.1.0, @nuxtjs/robots@5.2.6, @nuxtjs/turnstile@0.9.12, nitro-cloudflare-dev@0.2.2, nuxt-link-checker@4.1.1, nuxt-seo-experiments@4.0.1\n- Build Modules: -\n------------------------------\n```\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wizardly-hertz-gyk77v\n\n### Describe the bug\n\nSince the `3.16.0` release, my project doesn't build anymore. I isolated the issue to a component using `Turnstile` which seems to depend on `@nuxt/scripts` which is mentioned in the error logs.\n\nThe reproduction is very small, just a Turnstile component without configuration.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nERROR ✗ Build failed in 1.79s 5:04:16 PM\n\n\n[ nuxi 5:04:16 PM] ERROR Nuxt Build Error: [vite]: Rollup failed to resolve import \"unenv/runtime/mock/noop\" from \"/project/workspace/node_modules/@nuxt/scripts/dist/runtime/validation/mock.js\".\nThis is most likely unintended because it can break your application at runtime.\nIf you do want to externalize this module explicitly add it to\nbuild.rollupOptions.external\n\n This is most likely unintended because it can break your application at runtime.\n If you do want to externalize this module explicitly add it to\n build.rollupOptions.external\n at viteLog (node_modules/vite/dist/node/chunks/dep-glQox-ep.js:51589:15)\n at onRollupLog (node_modules/vite/dist/node/chunks/dep-glQox-ep.js:51639:5)\n at onLog (node_modules/vite/dist/node/chunks/dep-glQox-ep.js:51287:7)\n at node_modules/rollup/dist/es/shared/node-entry.js:20487:32\n at Object.logger [as onLog] (node_modules/rollup/dist/es/shared/node-entry.js:22230:9)\n at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:21113:26)\n at node_modules/rollup/dist/es/shared/node-entry.js:21071:26\n\nerror Command failed with exit code 1.\n```",[2034],{"name":1985,"color":1986},"scripts","Build fails since 3.16.0 due to failed import","2025-03-14T18:00:08Z","https://github.com/nuxt/scripts/issues/412",{"description":2040,"labels":2041,"number":2046,"owner":1988,"repository":1989,"state":1990,"title":2047,"updated_at":2048,"url":2049,"score":2050},"### 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```",[2042,2043],{"name":1985,"color":1986},{"name":2044,"color":2045},"duplicate","cfd3d7",2972,"Syntax error in the Headless UI Vue component code","2024-12-25T10:39:30Z","https://github.com/nuxt/ui/issues/2972",0.7204227,{"description":2052,"labels":2053,"number":2056,"owner":1988,"repository":1989,"state":1990,"title":2057,"updated_at":2058,"url":2059,"score":2060},"### 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?",[2054,2055],{"name":2013,"color":2014},{"name":2002,"color":2003},3658,"Button Focus Indication","2025-03-24T09:50:12Z","https://github.com/nuxt/ui/issues/3658",0.7213856,{"description":2062,"labels":2063,"number":2066,"owner":1988,"repository":1989,"state":1990,"title":2067,"updated_at":2068,"url":2069,"score":2070},"### 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```",[2064,2065],{"name":2013,"color":2014},{"name":2002,"color":2003},3456,"DropdownMenuItem type","2025-03-28T17:41:59Z","https://github.com/nuxt/ui/issues/3456",0.72878325,{"description":2072,"labels":2073,"number":2076,"owner":1988,"repository":1989,"state":1990,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### Description\n\nIs 'Type a command or search...' really suitable in an English context?\nToday, while deploying a new version of the docs, I hesitated when I saw this phrase in the search bar. In Chinese, the direct translation of 'Type a command or search...' feels quite strange in this context, as if it’s asking the user whether they want to enter a command or perform a search.\nThis phrase sounds unnatural in Chinese. A more appropriate translation might be: \"请输入内容进行搜索...\" (Enter content to search...).\n\n",[2074,2075],{"name":2013,"color":2014},{"name":2002,"color":2003},3276,"Regarding the Appropriateness of Translating 'Type a command or search...'","2025-02-09T10:38:48Z","https://github.com/nuxt/ui/issues/3276",0.7288186,{"description":2082,"labels":2083,"number":2086,"owner":1988,"repository":1989,"state":1990,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### 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```",[2084,2085],{"name":1985,"color":1986},{"name":2002,"color":2003},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.7315607,["Reactive",2092],{},["Set"],["ShallowReactive",2095],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"WdBmftyBj5prIVk1NAuMOFYBdEwBm2UeQ45V_Syba4s":-1},"/nuxt/nuxt.com/1013"]