\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```",[2966,2967],{"name":2905,"color":2906},{"name":2908,"color":2909},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":2974,"labels":2975,"number":2982,"owner":2914,"repository":2914,"state":2946,"title":2983,"updated_at":2984,"url":2985,"score":2986},"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>",[2976,2979],{"name":2977,"color":2978},"needs reproduction","FBCA04",{"name":2980,"color":2981},"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":2988,"labels":2989,"number":2993,"owner":2914,"repository":2914,"state":2946,"title":2994,"updated_at":2995,"url":2996,"score":2997},"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>",[2990],{"name":2991,"color":2992},"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":2999,"labels":3000,"number":3002,"owner":2914,"repository":2914,"state":2946,"title":3003,"updated_at":3004,"url":3005,"score":3006},"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>",[3001],{"name":2991,"color":2992},1391,"how i do use package vuelidate in nuxt.js?","2023-01-18T15:41:43Z","https://github.com/nuxt/nuxt/issues/1391",0.69560593,{"description":3008,"labels":3009,"number":3014,"owner":2914,"repository":2915,"state":2946,"title":3015,"updated_at":3016,"url":3017,"score":3018},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v20.12.2\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.9.1\r\n- Package Manager: pnpm@8.3.1\r\n- Builder: -\r\n- User Config: app, colorMode, ui, css, modules, runtimeConfig, authJs, pinia, nitro, alias, devtools, imports, typescript\r\n- Runtime Modules: @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.2.0, @vueuse/nuxt@9.13.0, @hebilicious/authjs-nuxt@0.3.0-beta.2, @nuxtjs/eslint-module@4.1.0, nuxt-monaco-editor@1.2.7, nuxt-lodash@2.5.3, @nuxt/ui@2.14.2\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.14.2\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-eqhn2j?file=app.vue\r\n\r\n### Description\r\n\r\nI'm getting multiple new type errors that I wasn't getting before with types that used to be valid. I think this is being caused by an update to `vue-tsc`, however I'm not sure.\r\n\r\nIn the reproduction link you can see the two examples that don't compile. Simply run `npm run typecheck` in the console to get the errors\r\nHere are the minimal examples\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nconst value = ref\u003Cstring | null | undefined>(undefined);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUInput v-model.trim=\"value\" />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n```shell-script\r\nTS2322: Type 'string | null | undefined' is not assignable to type 'string | number | undefined'.\r\n```\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nconst value = ref\u003Cboolean|undefined>();\r\nconst options = [\r\n {\r\n label: 'Yes',\r\n value: true\r\n },\r\n {\r\n label: 'No',\r\n value: false\r\n },\r\n {\r\n label: 'None selected',\r\n value: undefined\r\n }\r\n];\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUSelectMenu\r\n :options=\"options\"\r\n v-model=\"value\"\r\n value-attribute=\"value\" option-attribute=\"label\"\r\n />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n```shell-script\r\nTS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record\u003Cstring, any> | unknown[] | undefined'.\r\n```\r\n\r\n### Additional context\r\n\r\n\r\n### Logs\r\n\r\n```shell-script\r\napp.vue:14:15 - error TS2322: Type 'string | null | undefined' is not assignable to type 'string | number | undefined'.\r\n\r\n14 \u003CUInput v-model.trim=\"inputValue\" />\r\n ~~~~~~~~~~\r\n\r\n node_modules/@nuxt/ui/dist/runtime/components/forms/Input.vue.d.ts:244:5\r\n 244 modelValue: string | number;\r\n ~~~~~~~~~~\r\n The expected type comes from property 'modelValue' which is declared here on type 'Partial\u003C{ size: InputSize; ui: any; id: string; icon: string; color: any; type: string; class: any; name: string; modelValue: string | number; leading: boolean; variant: InputVariant; ... 12 more ...; modelModifiers: { ...; }; }> & Omit\u003C...> & Record\u003C...>'\r\n\r\n\r\nFound 1 error in app.vue:14\r\n```\r\n",[3010,3011,3012],{"name":2905,"color":2906},{"name":2980,"color":2981},{"name":3013,"color":2981},"stale",1710,"Unable to use boolean values with USelectMenu or null with UInput","2025-06-19T02:12:37Z","https://github.com/nuxt/ui/issues/1710",0.70025676,["Reactive",3020],{},["Set"],["ShallowReactive",3023],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f-bX_MDKUcp-dsPrFMpC74eV0_7mVwR0CaNRznfyot3M":-1},"/nuxt/ui/2106"]