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```",[3019,3022],{"name":3020,"color":3021},"bug","d73a4a",{"name":3023,"color":3024},"duplicate","cfd3d7",2972,"nuxt","ui","closed","Syntax error in the Headless UI Vue component code","2024-12-25T10:39:30Z","https://github.com/nuxt/ui/issues/2972",0.65976715,{"description":3034,"labels":3035,"number":3040,"owner":3026,"repository":3027,"state":3028,"title":3041,"updated_at":3042,"url":3043,"score":3044},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.9.0`\n- Builder: `-`\n- User Config: `devtools`, `modules`, `css`, `future`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.0.0`, `@nuxt/eslint@1.2.0`\n- Build Modules: `-`\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/lingering-night-wl8j66\n\n### Description\n\nWhen items have value `null` or `undefined` and click the select menu, app will throw an error. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nUncaught (in promise) TypeError: Cannot read properties of undefined (reading 'disabled') SelectMenu.vue:379\n at SelectMenu.vue:379:35\n at renderList (runtime-core.esm-bundler.js:2904:16)\n at SelectMenu.vue:1:1\n at renderFnWithContext (runtime-core.esm-bundler.js:692:13)\n at renderSlot (runtime-core.esm-bundler.js:2981:53)\n at ComboboxGroup.vue:38:2\n at renderFnWithContext (runtime-core.esm-bundler.js:692:13)\n at renderSlot (runtime-core.esm-bundler.js:2981:53)\n at ListboxGroup.vue:21:34\n at renderFnWithContext (runtime-core.esm-bundler.js:692:13)\n```",[3036,3037],{"name":3020,"color":3021},{"name":3038,"color":3039},"triage","ffffff",3316,"`USelectMenu`: can not open drop select when options have value `null`","2025-03-15T11:31:45Z","https://github.com/nuxt/ui/issues/3316",0.6802593,{"description":3046,"labels":3047,"number":3060,"owner":3026,"repository":3026,"state":3028,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.0-28292363.6141c08a\r\n- CLI Version: 3.9.1-1697114959.393b07e\r\n- Nitro Version: 2.7.0-28276432.ae25359\r\n- Package Manager: pnpm@8.6.2\r\n- Builder: -\r\n- User Config: imports\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/manniL/nuxt-23733\r\n\r\n1. `pnpm i`\r\n2. `pnpm dev`\r\n3. Check `pages/index.vue` and see that `addMinutes` is `any`. The code works though\r\n\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nWhen using unimport to import exports from `date-fns`, it is successful but types aren't provided as expected. When trying to reproduce it in plain `unimport` (playground) though, it resolves as desired.\r\n\r\nApparently this also happens when using `luxon` 👀\r\n\r\nTo \"not reproduce\" in unimport:\r\n\r\n1. Clone unimport\r\n1. `pnpm i`\r\n1. `pnpm i -D date-fns`\r\n1. Change the vite config to:\r\n\r\n```\r\nexport default defineConfig({\r\n plugins: [\r\n vue(),\r\n unimport.vite({\r\n dts: true,\r\n presets: [\r\n 'vue',\r\n {\r\n from: 'date-fns',\r\n imports: ['addMinutes']\r\n }\r\n ],\r\n dirs: [\r\n './composables/**'\r\n ],\r\n addons: {\r\n vueTemplate: true\r\n }\r\n }),\r\n inspect()\r\n ]\r\n})\r\n```\r\n\r\nLast step: use `addMinutes` and see that it is correctly typed\r\n\r\n\r\n### Additional context\r\n\r\n`unimport.d.ts`\r\n\r\n```ts\r\nexport {}\r\ndeclare global {\r\n const EffectScope: typeof import('vue')['EffectScope']\r\n const PascalCased: typeof import('/home/alichter/Programming/unimport/playground/composables/PascalCased')['PascalCased']\r\n const addMinutes: typeof import('date-fns')['addMinutes']\r\n // ...\r\n}\r\n```\r\n\r\n`.nuxt/types/imports.d.ts`\r\n\r\n```ts\r\n// Generated by auto imports\r\nexport {}\r\ndeclare global {\r\n const abortNavigation: typeof import('../../node_modules/.pnpm/nuxt-nightly@3.8.0-28292363.6141c08a_nuxt-nightly@3.8.0-28292363.6141c08a_vite@4.4.11/node_modules/nuxt-nightly/dist/app')['abortNavigation']\r\n const addMinutes: typeof import('../../node_modules/.pnpm/date-fns@2.30.0/node_modules/date-fns/index')['addMinutes']\r\n // ...\r\n}\r\n```\r\n\r\nIt is interesting how the paths are resolved differently. When replacing the above `const addMinutes: typeof import('../../node_modules/.pnpm/date-fns@2.30.0/node_modules/date-fns/index')['addMinutes']` with `const addMinutes: typeof import('date-fns')['addMinutes']`, the type imports work as expected.\r\n\r\n### Logs\r\n\r\n_No response_",[3048,3051,3054,3057],{"name":3049,"color":3050},"types","2875C3",{"name":3052,"color":3053},"pending triage","E99695",{"name":3055,"color":3056},"🔨 p3-minor","FBCA04",{"name":3058,"color":3059},"possible regression","B90A42",23733,"Importing types from module with relative path does not work","2025-05-30T09:46:28Z","https://github.com/nuxt/nuxt/issues/23733",0.68574625,{"description":3066,"labels":3067,"number":3074,"owner":3026,"repository":3027,"state":3028,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nhow to add second icon on the right for button in UTab component\n\n\n\nSOLVE: need to use the #trailing slot, I didn't see it in the documentation\n\n",[3068,3071],{"name":3069,"color":3070},"question","d876e3",{"name":3072,"color":3073},"v3","49DCB8",2717,"second icon in UTab component","2024-12-09T11:15:15Z","https://github.com/nuxt/ui/issues/2717",0.6868024,{"description":3080,"labels":3081,"number":3084,"owner":3026,"repository":3027,"state":3028,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v18.20.4\n- Nuxt Version: 3.13.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.7.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.18.7\n- Build Modules: -\n\n### Version\n\nv3\n\n### Reproduction\n\nCreat new project with nuxi\n\nInstall nuxt/ui\n\n### Description\n\nCannot destructure property 'nuxt' of 'this' as it is undefined.\n\nNot working on fresh project\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3082,3083],{"name":3020,"color":3021},{"name":3072,"color":3073},2442,"Cannot destructure property 'nuxt' of 'this' as it is undefined.","2024-10-23T20:22:23Z","https://github.com/nuxt/ui/issues/2442",0.69014335,{"description":3090,"labels":3091,"number":3094,"owner":3026,"repository":3027,"state":3028,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### 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```",[3092,3093],{"name":3069,"color":3070},{"name":3072,"color":3073},3456,"DropdownMenuItem type","2025-03-28T17:41:59Z","https://github.com/nuxt/ui/issues/3456",0.693157,{"description":3100,"labels":3101,"number":3104,"owner":3026,"repository":3027,"state":3028,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### 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?",[3102,3103],{"name":3069,"color":3070},{"name":3072,"color":3073},3658,"Button Focus Indication","2025-03-24T09:50:12Z","https://github.com/nuxt/ui/issues/3658",0.69423926,{"description":3110,"labels":3111,"number":3116,"owner":3026,"repository":3026,"state":3028,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.8.1\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools, imports\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://github.com/invalidoperation/nuxt-type-only-import-issue\n\n### Describe the bug\n\nWhen auto-importing TypeScript type-only exports, an absolute URL is added to the generated `.nuxt/types/imports.d.ts` file:\r\n```ts\r\n...\r\n// for type re-export\r\ndeclare global {\r\n // @ts-ignore\r\n export type { Component, ComponentPublicInstance, ComputedRef, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode } from '../../node_modules/vue'\r\n // @ts-ignore\r\n export type { NotWorkingExample } from 'C:/Users/m.mustermann/source/repos/PoCs/nuxt-bugs/type-only-import-issue/types/notWorkingExample.ts'\r\n // @ts-ignore\r\n export type { WorkingExample } from '../../types/workingExample'\r\n}\r\n...\r\n```\r\n\r\nWhen adding, for example, a `export default {}` or any other named export which is not a type, it works correctly.\r\n\r\nThe effect is that types are not correctly loaded anymore and instead, in my example, it just sees an `export NotWorkingExample` instead of `type WorkingExample = string | number | undefined`:\r\n\r\n\r\n\r\n\r\nAfter some testing, it seems that it would be enough to fix this in `imports.d.ts` by:\r\n\r\n1. changing the path from an absolute to a relative path\r\n2. adding an additional `import(\"../../types/notWorkingExample\");` to `declare global`:\r\n```ts\r\n import(\"../../types/notWorkingExample\");\r\n export type {NotWorkingExample} from \"../../types/notWorkingExample\";\r\n```\r\n\r\nThe types are correctly auto-imported after this change.\r\n\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3112,3115],{"name":3113,"color":3114},"good first issue","fbca04",{"name":3049,"color":3050},24314,"Type-only auto-import has wrong/absolute path in .nuxt/types/imports.d.ts","2025-05-21T09:11:01Z","https://github.com/nuxt/nuxt/issues/24314",0.6968624,{"description":3122,"labels":3123,"number":3127,"owner":3026,"repository":3027,"state":3028,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### Environment\n\nyall lost cursor-pointer on paginations switching from v2-v3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.xx\n\n### Reproduction\n\ntake your mouse and hover over stuff on https://ui3.nuxt.dev/components/pagination\n\n\n### Description\n\ntheres no cursor: pointer; on hover for paginations in v3\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3124,3125,3126],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3072,"color":3073},2928,"yall lost cursor-pointer on paginations switching from v2-v3","2025-04-02T09:37:31Z","https://github.com/nuxt/ui/issues/2928",0.6981367,{"description":3133,"labels":3134,"number":3139,"owner":3026,"repository":3027,"state":3028,"title":3140,"updated_at":3141,"url":3142,"score":3143},"### 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```",[3135,3138],{"name":3136,"color":3137},"enhancement","a2eeef",{"name":3072,"color":3073},2768,"Release form validation as standalone library","2024-12-16T09:47:15Z","https://github.com/nuxt/ui/issues/2768",0.7001873,["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbkBnLaKiL5OSnVocTxKJ1SwnIpZMzNHQaLwu8xe5jZM":-1},"/nuxt/ui/3475"]