\n \u003CUSlider v-if=\"index == 'range' && typeof item == 'number'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />\n \u003CUInput v-else :type=\"index\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003Cpre class=\"w-1/2 bg-gray-200 p-4 leading-14\"> {{ state }} \u003C/pre>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\nconst state = ref({}) // ISSUE: Default values are not loaded in the v-model\nconst items = {\n number: 50,\n reset: true, // ISSUE: UInput is not supporting boolean values for v-model\n submit: true, // ISSUE: UInput is not supporting boolean values for v-model\n search: \"search\",\n date: \"2025-04-25\",\n text: \"text\",\n color: \"#ccffcc\",\n button: true, // ISSUE: UInput is not supporting boolean values for v-model\n checkbox: false, // ISSUE: UInput is not supporting boolean values for v-model\n \"datetime-local\": \"2025-04-25T10:49:31\",\n email: \"nobody@gmail.com\",\n file: \"\",\n hidden: \"hidden\",\n image: \"image.svg\",\n month: \"2025-04\",\n password: \"topsecret\",\n radio: true, // ISSUE: UInput is not supporting boolean values for v-model\n range: 50, // Default value is displayed but not loaded in the v-model\n tel: \"0612345678\",\n time: \"10:49:31\",\n url: \"www.chatgpt.com\",\n week: \"2025-W16\"\n}\n// const state = reactive(items) // Workaround for default-value\n\u003C/script>\n```\n\n### Description\n\nI made a small comparison between `UInput` and other components like `UColorPicker` and `USlider` and I stumbled on a couple of issues.\n* `default-value` is not displayed except for `range` and `USlider`\n* `default-value` is never initialized in the `v-model`\n* Booleans are not supported in the `v-model` and I was therefore not able to make them reactive.\n\nWorkaround is to load the default value via the `state`, but that requires an additional step and is therefore not ideal for dynamic forms\n`const state = reactive(items)`\n\nWorkaround for working with booleans, but I am not sure how to apply the `v-model` yet🤔\n`\u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />`\n\n\n### Additional context\n\nDefault values via `default-value`\n\nDefault value via `state`\n\n\n### Logs\n\n```shell-script\n\n```",[3229,3232],{"name":3230,"color":3231},"bug","d73a4a",{"name":3196,"color":3197},3983,"Default values are not loaded in the v-model","2025-06-30T13:04:54Z","https://github.com/nuxt/ui/issues/3983",0.6796789,{"description":3239,"labels":3240,"number":3247,"owner":3199,"repository":3200,"state":3209,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `4.1.2`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.6`\n- Package Manager: `npm@11.5.2`\n- Builder: `-`\n- User Config: `app`, `runtimeConfig`, `modules`, `css`, `colorMode`, `site`, `supabase`, `security`, `scripts`, `dayjs`, `devtools`, `sentry`, `sourcemap`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@4.0.0`, `@pinia/nuxt@0.11.2`, `@vueuse/nuxt@13.5.0`, `@nuxtjs/robots@5.4.0`, `@nuxtjs/supabase@1.4.6`, `dayjs-nuxt@2.1.11`, `@nuxt/eslint@1.8.0`, `nuxt-security@2.2.0`, `@nuxt/scripts@0.11.10`, `@sentry/nuxt/module@9.40.0`, `nuxt-tour@0.0.40`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\nNot able to get the codesandbox website to actually show me a preview right now; so posting this without a reproduction, however I feel that since the behaviour is already clearly shown on the nuxt ui docs site it should be very obvious. Will create a reproduction when I can get codesandbox to render a preview.\n\n### Description\n\n**Issue:** It seems like the date within the ChangelogVersions component renders out basically -1 (minus one) days; so if you input something like \"2025-10-20\" it will render \"Oct, 19th, 2025\" on the front end. Trying with actually passing a Date() object too and the same result. \n\n\u003Cimg width=\"903\" height=\"602\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/5c706bcd-7c48-4d15-9b8b-399e30eafdd7\" />\n\nScreenshot is actually from the Nuxt UI documentation site (where the behaviour also seems to exist).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3241,3242,3245],{"name":3230,"color":3231},{"name":3243,"color":3244},"triage","ffffff",{"name":3246,"color":3197},"v4",5278,"[ChangelogVersions] - Date Prop showing incorrect date","2025-10-20T20:40:48Z","https://github.com/nuxt/ui/issues/5278",0.68090224,{"description":3253,"labels":3254,"number":3257,"owner":3199,"repository":3200,"state":3209,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v24.2.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: bun@1.2.17\n- Builder: -\n- User Config: css, modules, nitro, i18n, imports, runtimeConfig, icon, compatibilityDate\n- Runtime Modules: @nuxtjs/i18n@10.0.6, @nuxt/ui-pro@3.3.1, @nuxt/eslint@1.9.0, @nuxtjs/html-validator@2.1.0, @nuxt/image@1.11.0, @vueuse/nuxt@13.7.0, @artmizu/nuxt-prometheus@2.5.2, @nuxtjs/seo@3.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.1\n\n### Reproduction\n\n```vue\n\u003Cscript lang=\"ts\" setup>\nconst value = ref(\"\");\nconst items: Array\u003Cstring | number> = [1, \"2\", 3];\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm :state=\"value\" class=\"flex max-w-72 flex-col space-y-4 py-8\">\n \u003CUFormField label=\"UInputMenu\">\n \u003CUInputMenu v-model=\"value\" :items placeholder=\"UInputMenu\" />\n \u003C/UFormField>\n \u003CUFormField label=\"USelect\">\n \u003CUSelect v-model=\"value\" :items placeholder=\"USelect\" />\n \u003C/UFormField>\n \u003CUFormField label=\"USelectMenu\">\n \u003CUSelectMenu v-model=\"value\" :items placeholder=\"USelectMenu\" />\n \u003C/UFormField>\n \u003C/UForm>\n\u003C/template>\n```\n\n### Description\n\nAfter updating to version 3.3.1, the InputMenu, Select and SelectMenu component's placeholder value is not shown, if the value is not found in the items array. In version 3.3.0 the placeholder correctly shows up.\n\nNuxt UI 3.3.0\n\u003Cimg width=\"350\" height=\"300\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2b0937d4-7640-4277-8169-ff192bc01d97\" />\n\nNuxt UI 3.3.1\n\u003Cimg width=\"410\" height=\"285\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3d744e11-748b-4b3c-a236-fcee8fdcd765\" />\n\n\u003Cimg width=\"395\" height=\"298\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/ac7be307-ca5c-4957-a2fb-5721eebdea07\" />\n\nIf the v-model is `undefined` it works just like in 3.3.0, however in my projects I feel like that's not always achievable because of type definitions.\nI know I could set the default value to one of the items' values, but what if I don't want to populate the component by default and just show the placeholder? \nFor this to work in version 3.3.1 I'd have to loosen up the type definitions, so that required fields are not required anymore, which is wrong and I don't feel like I should have to do to keep the behavior of a UI component. \n\nShouldn't we have an exception for falsy values that are sometimes used as default values (empty string, 0...), so the placeholder can be shown without having to explicitly have `undefined` as the default value?\n\n### Additional context\n\nI haven't dug that deep, but I think #4689 introduced this behavior to these components. \n\n### Logs\n\n```shell-script\n\n```",[3255,3256],{"name":3230,"color":3231},{"name":3196,"color":3197},4812,"[InputMenu,Select,SelectMenu] Placeholder not showing in v3.3.1, if item is not found and default value is not undefined or null","2025-08-27T14:42:51Z","https://github.com/nuxt/ui/issues/4812",0.6934426,{"description":3263,"labels":3264,"number":3268,"owner":3199,"repository":3200,"state":3209,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Environment\n\n- Operating system: `Darwin`\n- Node Version: `v22.11.0`\n- Nuxt Version `4.0.3`\n- Package manager `pnpm@10.15.0`\n- Nuxt UI: v3.3.3\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\ninstall nuxt, nuxt/ui, @internationalized/date, copy paste the UCalendar example and see the build failure\n\nsee https://github.com/francois-codes/ucalendar-repro for minimal repro\n\nI tried to rollback nuxt/ui, reka-ui and @internationalized/date to what we had on our repo when the typecheck was succesful (v3.3.2, v2.4.1, v3.8.2), but I couldn't get the build to pass like on our main repo (which I can't share unfortunately). \n\nOn our main repo, if I revert before the version bump, the typecheck passes again. Happy to share the diff of the lock file if that's helpful\n\n\n### Description\n\n\nHi !\n\nWe're using nuxt 4.0.3 with nuxt/ui - today our CI bumped our nuxt UI version from v3.3.2 to v3.3.3 and `nuxt typecheck` started to fail on the UCalendar component's v-model prop\n\nWe are using `@internationalized/date`, and our implementation is fairly close from the example given in the docs. \n\nOur repo was running nuxt ui 3.3.2, with reka-ui 2.4.1 and @internationalized/date 3.8.2. If I rollback before the version update and build, everything is fine. \n\nNot super urgent as the component still works, but annoying to have these type issues that can't be fixed easily. I'm not sure I understand why it's failing as DateValue on the calendar is defined as CalendarDate | \u003C...other types> so it should work 🤔 https://github.com/adobe/react-spectrum/blob/f74b9ad1d87af520751cae1405f664f5f5312a77/packages/%40internationalized/date/src/queries.ts#L18\n\nNot sure the issue is with nuxt/ui itself, I tried to trace it to its root but I haven't been able to pin the exact cause\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3265,3266,3267],{"name":3230,"color":3231},{"name":3196,"color":3197},{"name":3243,"color":3244},4928,"Type error on UCalendar v-model on nuxt/ui 3.3.3","2025-10-01T13:13:32Z","https://github.com/nuxt/ui/issues/4928",0.6945319,{"description":3274,"labels":3275,"number":3282,"owner":3199,"repository":3199,"state":3209,"title":3283,"updated_at":3284,"url":3285,"score":3286},"Property \"date\" was accessed during render but is not defined on instance. \r\n at \u003CRouter>\r\nApp.vue datetime v-model=\"date\"裡面的date 哪裡有錯\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"app\">\r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv class=\"left-section\">\r\n \u003Ch2>楊梅物流中心\u003C/h2>\r\n \u003Ch4>訪客車輛資訊\u003C/h4>\r\n \u003Ch4>-區域詳細資訊\u003C/h4>\r\n \u003Ch4>訪客預約登記\u003C/h4>\r\n \u003Ch4>訪客預約紀錄\u003C/h4>\r\n \u003Ch4>-已預約未進場車輛\u003C/h4>\r\n \u003Ch4>-未來時段預約紀錄\u003C/h4>\r\n \u003Ch4>-訪客預約類別\u003C/h4>\r\n \u003Ch4>\u003Ca href=\"http://localhost:8080/\">车辆進出紀錄\u003C/a>\u003C/h4>\r\n \u003Ch4>閘道控制選單\u003C/h4>\r\n \u003Ch4>承租公司設定\u003C/h4>\r\n \u003Ch4>貨運公司設定\u003C/h4>\r\n \u003Ch4>車輛設定\u003C/h4>\r\n \u003Ch4>使用者設定\u003C/h4>\r\n \u003Ch4>使用者群組\u003C/h4>\r\n \u003Ch4>使用者權限\u003C/h4>\r\n \u003Ch4>使用紀錄\u003C/h4>\r\n \u003C/div>\r\n \u003Cdiv class=\"center-section\">\r\n \u003Ch2>車輛進出紀錄\u003C/h2>\r\n \u003Cdiv class=\"box\">\r\n \u003Ctable>\r\n \u003Cthead>\r\n \u003Ctr>\r\n \u003Cth>\r\n 車牌號碼\r\n \u003Cselect v-model=\"車牌號碼\">\r\n \u003Coption value=\"車牌號碼\">Ac-2345\u003C/option>\r\n \u003C/select>\r\n \u003C/th>\r\n \u003Cth>\r\n 預約樓層\r\n \u003Cselect v-model=\"預約樓層\">\r\n \u003Coption value=\"預約樓層\">3F\u003C/option>\r\n \u003C/select>\r\n \u003C/th>\r\n \u003Cth>\r\n 拜訪公司\r\n \u003Cselect v-model=\"拜訪公司\">\r\n \u003Coption value=\"拜訪公司\">B公司\u003C/option>\r\n \u003C/select>\r\n \u003C/th>\r\n \u003C/tr>\r\n \u003Ctr>\r\n \u003Cth>\r\n 車輛類別\r\n \u003Cselect v-model=\"車輛類別\">\r\n \u003Coption value=\"車輛類別\">契約車\u003C/option>\r\n \u003C/select>\r\n \u003C/th>\r\n \u003Cth>\r\n 車輛類型\r\n \u003Cselect v-model=\"車輛類型\">\r\n \u003Coption value=\"車輛類型\">貨車\u003C/option>\r\n \u003C/select>\r\n \u003C/th>\r\n \u003Cth>\r\n 駕駛人公司\r\n \u003Cselect v-model=\"駕駛人公司\">\r\n \u003Coption value=\"駕駛人公司\">C物流公司\u003C/option>\r\n \u003C/select>\r\n \u003C/th>\r\n \u003C/tr>\r\n \u003C/thead>\r\n \u003C/table>\r\n\r\n \u003Cdiv class=\"block-left\">\r\n \u003Cinput type=\"checkbox\" class=\"checkbox\" />\r\n \u003Ch4>進場起始時間\u003C/h4>\r\n \u003Cdatetime v-model=\"date\" input-id=\"startDate\">\r\n \u003Cinput type=\"datetime-local\" v-model=\"value1\" />\r\n \u003C/datetime>\r\n\r\n \u003Cinput type=\"checkbox\" class=\"checkbox\" />\r\n \u003Ch4>離場起始時間\u003C/h4>\r\n \u003Cdatetime v-model=\"date\" input-id=\"startDate\">\r\n \u003Cinput type=\"datetime-local\" v-model=\"value2\" />\r\n \u003C/datetime>\r\n \u003C/div>\r\n\r\n \u003Cdiv class=\"block-right\">\r\n \u003Ch4>進場結束時間\u003C/h4>\r\n \u003Cdatetime v-model=\"date\" input-id=\"startDate\">\r\n \u003Cinput type=\"datetime-local\" v-model=\"value3\" />\r\n \u003C/datetime>\r\n\r\n \u003Ch4>離場結束時間\u003C/h4>\r\n \u003Cdatetime v-model=\"date\" input-id=\"startDate\">\r\n \u003Cinput type=\"datetime-local\" v-model=\"value4\" />\r\n \u003C/datetime>\r\n \u003C/div>\r\n \u003Cdiv class=\"gwee\">\r\n \u003Cbutton @click=\"search\">搜尋\u003C/button>\r\n \u003Cbutton @click=\"cancel\">取消\u003C/button>\r\n \u003C/div>",[3276,3279],{"name":3277,"color":3278},"needs reproduction","FBCA04",{"name":3280,"color":3281},"closed-by-bot","ededed",26600,"Failed to resolve component: datetime If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at \u003CRouter>","2024-04-10T01:47:41Z","https://github.com/nuxt/nuxt/issues/26600",0.69509387,{"description":3288,"labels":3289,"number":3293,"owner":3199,"repository":3199,"state":3209,"title":3294,"updated_at":3295,"url":3296,"score":3297},"While refreshing the page it throws error\r\n\r\n[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C\r\n[vue-router] uncaught error during route navigation:\r\n/data/nuxt/node_modules/vue-date-picker/src/datepicker.vue:1\r\n(function (exports, require, module, __filename, __dirname) { \u003Cstyle scoped>\r\n^\r\n\r\nSyntaxError: Unexpected token \u003C\r\nat createScript (vm.js:74:10)\r\nat Object.runInThisContext (vm.js:116:10)\r\nat Module._compile (module.js:533:28)\r\nat Object.Module._extensions..js (module.js:580:10)\r\nat Module.load (module.js:503:32)\r\nat tryModuleLoad (module.js:466:12)\r\nat Function.Module._load (module.js:458:3)\r\nat Module.require (module.js:513:17)\r\nat require (internal/module.js:11:18)\r\nat r (/data/nuxt/node_modules/vue-server-renderer/build.js:7739:16)\r\nat Object. (server-bundle.js:4211:18)\r\nat webpack_require (server-bundle.js:27:30)\r\nat Object.129 (pages/modules/_module/add.515b290012e443c855fd.js:773:74)\r\nat webpack_require (server-bundle.js:27:30)\r\nat Object.128 (pages/modules/_module/add.515b290012e443c855fd.js:738:279)\r\nat webpack_require (server-bundle.js:27:30)\r\n\r\nMy code snippet is:\r\n_\r\n\r\n\u003Cscript> import Vue from 'vue' import datepicker from 'vue-date-picker' Vue.use(datepicker) export default { name: 'TextInput', props: ['data', 'modelData', 'readOnly'], data () { return { date: '' } }, components: { datepicker } \u003C/script> \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1476\">#c1476\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3290],{"name":3291,"color":3292},"2.x","d4c5f9",1645,"Nuxt Js while refreshing date picker is not working([vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C)","2023-01-18T15:42:07Z","https://github.com/nuxt/nuxt/issues/1645",0.6953473,{"description":3299,"labels":3300,"number":3302,"owner":3199,"repository":3199,"state":3209,"title":3303,"updated_at":3304,"url":3305,"score":3306},"File nuxt.config.js . I declare:\r\n```\r\n plugins: [\r\n {src: '~/plugins/vuelidate.js', ssr: true}\r\n ]\r\n\r\n```\r\nand in file login.vue \r\n```\r\n\u003Cdiv class=\"form_item\">\r\n \u003Ci class=\"li-user\">\u003C/i>\r\n \u003Cinput v-model=\"formLogin.email\" class=\"form-control\" placeholder=\"email\"\r\n :class=\"{'has_error': $v.formLogin.email.$error}\"\r\n @input=\"delayTouch($v.formLogin.email)\"/>\r\n \u003C/div>\r\n \u003Cdiv class=\"form_item\">\r\n \u003Ci class=\"li-key\">\u003C/i>\r\n \u003Cinput v-model=\"formLogin.password\" type=\"password\" class=\"form-control\" \r\n placeholder=\"password\"\r\n :class=\"{'has_error': $v.formLogin.password.$error}\"\r\n @input=\"delayTouch($v.formLogin.password)\"/>\r\n \u003C/div>\r\n```\r\nwhen running, vue warning.\r\n`[Vue warn]: Computed property \"$error\" was assigned to but it has no setter. (found in \u003CRoot>)`\r\n\r\nWho can help me! or How to do otherwise\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1233\">#c1233\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3301],{"name":3291,"color":3292},1391,"how i do use package vuelidate in nuxt.js?","2023-01-18T15:41:43Z","https://github.com/nuxt/nuxt/issues/1391",0.69560593,["Reactive",3308],{},["Set"],["ShallowReactive",3311],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f-bX_MDKUcp-dsPrFMpC74eV0_7mVwR0CaNRznfyot3M":-1},"/nuxt/ui/2106"]