\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```",[3190,3191],{"name":3157,"color":3158},{"name":3143,"color":3144},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":3198,"labels":3199,"number":3202,"owner":3146,"repository":3147,"state":3170,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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```",[3200,3201],{"name":3157,"color":3158},{"name":3143,"color":3144},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":3208,"labels":3209,"number":3216,"owner":3146,"repository":3146,"state":3170,"title":3217,"updated_at":3218,"url":3219,"score":3220},"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>",[3210,3213],{"name":3211,"color":3212},"needs reproduction","FBCA04",{"name":3214,"color":3215},"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":3222,"labels":3223,"number":3227,"owner":3146,"repository":3146,"state":3170,"title":3228,"updated_at":3229,"url":3230,"score":3231},"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>",[3224],{"name":3225,"color":3226},"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":3233,"labels":3234,"number":3236,"owner":3146,"repository":3146,"state":3170,"title":3237,"updated_at":3238,"url":3239,"score":3240},"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>",[3235],{"name":3225,"color":3226},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":3242,"labels":3243,"number":3246,"owner":3146,"repository":3147,"state":3170,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.6\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@10.11.0\n- Builder: -\n- User Config: compatibilityDate, future, css, components, modules, runtimeConfig, imports, vite, ssr, ignore\n- Runtime Modules: @nuxt/eslint@1.5.2, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, @pinia/nuxt@0.11.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using the UFormField component, passing the `error` prop using the Boolean attribute shorthand syntax does not work as expected.\n\nThis works correctly:\n\n```vue\n\u003CUFormField :label=\"`总额(${rowData?.marginAsset})`\" size=\"lg\" :error=\"true\" />\n```\n\nHowever, this does not work:\n```vue\n\u003CUFormField :label=\"`总额(${rowData?.marginAsset})`\" size=\"lg\" error />\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3244,3245],{"name":3157,"color":3158},{"name":3143,"color":3144},4496,"Boolean attribute not worked on `UFormField`","2025-07-10T10:04:09Z","https://github.com/nuxt/ui/issues/4496",0.6982987,["Reactive",3252],{},["Set"],["ShallowReactive",3255],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f-bX_MDKUcp-dsPrFMpC74eV0_7mVwR0CaNRznfyot3M":-1},"/nuxt/ui/2106"]