\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003CUInput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[3176,3177,3178,3181],{"name":3135,"color":3136},{"name":3141,"color":3142},{"name":3179,"color":3180},"closed-by-bot","ededed",{"name":3182,"color":3180},"stale",2713,"closed","UInput Component Lacks Proper Handling of compositionstart and compositionend","2025-06-18T09:05:41Z","https://github.com/nuxt/ui/issues/2713",0.62305284,{"description":3190,"labels":3191,"number":3194,"owner":3144,"repository":3145,"state":3184,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Environment\n\n- Operating System: Linux\n- Node Version: v24.4.0\n- Nuxt Version: -\n- CLI Version: 3.26.4\n- Nitro Version: -\n- Package Manager: bun@1.2.4\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/w6mpnq\n\n### Description\n\nThe props `defaultValue` doesn't seem to work on UInput (found this props on the documentation). The field stays empty.\n`modelValue` works \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3192,3193],{"name":3135,"color":3136},{"name":3138,"color":3139},4569,"defaultValue has no effect","2025-07-22T08:38:57Z","https://github.com/nuxt/ui/issues/4569",0.6528406,{"description":3200,"labels":3201,"number":3204,"owner":3144,"repository":3145,"state":3184,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.0\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, css, build, supabase, content, pinia, devtools, debug, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui-pro@3.1.0, @vueuse/nuxt@13.1.0, @nuxt/content@3.5.1, @nuxt/icon@1.12.0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.6, @nuxt/test-utils@3.17.2, @nuxtjs/supabase@1.5.0, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CUForm :state=\"state\" class=\"w-1/2 p-4\">\n \u003CUFormField v-for=\"(item, index) in items\" :key=\"index\" :label=\"index\" :name=\"index\">\n \u003CUColorPicker v-if=\"index == 'color'\" v-model=\"state[index]\" :default-value=\"item\" />\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```",[3202,3203],{"name":3135,"color":3136},{"name":3138,"color":3139},3983,"Default values are not loaded in the v-model","2025-06-30T13:04:54Z","https://github.com/nuxt/ui/issues/3983",0.65934855,{"description":3210,"labels":3211,"number":3214,"owner":3144,"repository":3145,"state":3184,"title":3215,"updated_at":3216,"url":3217,"score":3218},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.1\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, fonts, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.3.0, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, @nuxtjs/i18n@9.5.3, nuxt-security@2.2.0, @nuxt/ui@3.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/epic-smoke-95wysw?file=%2Fapp%2Fpages%2Findex.vue\n\n### Description\n\nUsing the `@update:model-value` event handler produces type errors with the Select component, starting from nuxt-ui v3.1.0 (v3.0.2 works fine).\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nType 'boolean | AcceptableValue | undefined' is not assignable to type '\"yes\" | \"no\"'.\n Type 'undefined' is not assignable to type '\"yes\" | \"no\"'.ts-plugin(2322)\n```",[3212,3213],{"name":3135,"color":3136},{"name":3138,"color":3139},4019,"Type Issue with Select Component","2025-04-29T15:39:56Z","https://github.com/nuxt/ui/issues/4019",0.6616945,{"description":3220,"labels":3221,"number":3225,"owner":3144,"repository":3145,"state":3184,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### 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",[3222,3223,3224],{"name":3135,"color":3136},{"name":3179,"color":3180},{"name":3182,"color":3180},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.663563,{"description":3231,"labels":3232,"number":3243,"owner":3144,"repository":3144,"state":3184,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.12.1\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nCheckout the project on Stackblitz:\r\n[https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue](https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue)\r\nThe input value should be 2, but it remains 1 if you remove the async statement or NuxtLayout, everything will be fixed.\r\n\r\n### Describe the bug\r\n\r\nIt seems something happens in NuxtLayout that breaks v-model behavior *before mount* and prevent it from updating the value of input. if you don't use any async statement or NuxtLayout, everything works fine.\r\n\r\n### Additional context\r\n\r\nIf you don't use v-model and use `:value` and `@input` instead or just print the variable value, everything works file, only v-model is broken.\r\n\r\n### Logs\r\n\r\n_No response_",[3233,3236,3239,3242],{"name":3234,"color":3235},"3.x","29bc7f",{"name":3237,"color":3238},"pending triage","E99695",{"name":3240,"color":3241},"needs reproduction","FBCA04",{"name":3179,"color":3180},26934,"NuxtLayout breaks v-model behaviour when used after any async statement","2024-05-07T01:49:01Z","https://github.com/nuxt/nuxt/issues/26934",0.66382575,{"description":3249,"labels":3250,"number":3261,"owner":3144,"repository":3144,"state":3184,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.8.0`\r\n- CLI Version: `3.9.1`\r\n- Nitro Version: `2.7.0`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `-`\r\n- User Config: `devtools`, `modules`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.8.0`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/TheFlyer1983/nuxt-issue\n\n### Describe the bug\n\nI am getting an issue with a component, that previously worked. But after upgrading my Nuxt to v3.8.0, I keep getting this error whenever I refresh:\r\n\r\n\r\n\r\nI am unable to get past this or debug this because there is no real information in which to use to identify the issue.\n\n### Additional context\n\nThis is causing a major block on upgrading from Nuxt 2 to Nuxt 3, for a business application that is currently live.\n\n### Logs\n\n```shell-script\nI get these logs from my terminal.\r\n\r\n\r\n[[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\r\nconst props = withDefaults(\r\n defineProps<{\r\n disabled?: boolean;\r\n modelValue: object | string | number | null;\r\n small?: boolean;\r\n xSmall?: boolean;\r\n }>(),\r\n {\r\n disabled: false,\r\n small: false,\r\n xSmall: false\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n (e: 'update:modelValue', value: object | string | number | null): void;\r\n}>();\r\n\r\nconst v = computed({\r\n get: () => props.modelValue,\r\n set: (value) => {\r\n emit('update:modelValue', value);\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <select\r\n v-model=\"v\"\r\n :disabled=\"disabled\"\r\n :class=\"[\r\n 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\r\n {\r\n 'form-select': !small,\r\n 'form-select-small': small,\r\n 'form-select-x-small': xSmall,\r\n 'opacity-50': disabled\r\n }\r\n ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\r\n >\r\n <slot />\r\n </select>\r\n</template>\r\n\u003C/pre>\u003Cbr>\r\nat /components/inputs/StyledSelect.vue] {\r\n cause: {\r\n statusMessage: 'Vite Error',\r\n message: '[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\\n' +\r\n 'const props = withDefaults(\\n' +\r\n ' defineProps<{\\n' +\r\n ' disabled?: boolean;\\n' +\r\n ' modelValue: object | string | number | null;\\n' +\r\n ' small?: boolean;\\n' +\r\n ' xSmall?: boolean;\\n' +\r\n ' }>(),\\n' +\r\n ' {\\n' +\r\n ' disabled: false,\\n' +\r\n ' small: false,\\n' +\r\n ' xSmall: false\\n' +\r\n ' }\\n' +\r\n ');\\n' +\r\n '\\n' +\r\n 'const emit = defineEmits<{\\n' +\r\n \" (e: 'update:modelValue', value: object | string | number | null): void;\\n\" +\r\n '}>();\\n' +\r\n '\\n' +\r\n 'const v = computed({\\n' +\r\n ' get: () => props.modelValue,\\n' +\r\n ' set: (value) => {\\n' +\r\n \" emit('update:modelValue', value);\\n\" +\r\n ' }\\n' +\r\n '});\\n' +\r\n '</script>\\n' +\r\n '\\n' +\r\n '<template>\\n' +\r\n ' <select\\n' +\r\n ' v-model=\"v\"\\n' +\r\n ' :disabled=\"disabled\"\\n' +\r\n ' :class=\"[\\n' +\r\n \" 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\\n\" +\r\n ' {\\n' +\r\n \" 'form-select': !small,\\n\" +\r\n \" 'form-select-small': small,\\n\" +\r\n \" 'form-select-x-small': xSmall,\\n\" +\r\n \" 'opacity-50': disabled\\n\" +\r\n ' }\\n' +\r\n ' ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\\n' +\r\n ' >\\n' +\r\n ' <slot />\\n' +\r\n ' </select>\\n' +\r\n '</template>\\n' +\r\n '\u003C/pre>\u003Cbr>',\r\n stack: '[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\\n' +\r\n 'const props = withDefaults(\\n' +\r\n ' defineProps<{\\n' +\r\n ' disabled?: boolean;\\n' +\r\n ' modelValue: object | string | number | null;\\n' +\r\n ' small?: boolean;\\n' +\r\n ' xSmall?: boolean;\\n' +\r\n ' }>(),\\n' +\r\n ' {\\n' +\r\n ' disabled: false,\\n' +\r\n ' small: false,\\n' +\r\n ' xSmall: false\\n' +\r\n ' }\\n' +\r\n ');\\n' +\r\n '\\n' +\r\n 'const emit = defineEmits<{\\n' +\r\n \" (e: 'update:modelValue', value: object | string | number | null): void;\\n\" +\r\n '}>();\\n' +\r\n '\\n' +\r\n 'const v = computed({\\n' +\r\n ' get: () => props.modelValue,\\n' +\r\n ' set: (value) => {\\n' +\r\n \" emit('update:modelValue', value);\\n\" +\r\n ' }\\n' +\r\n '});\\n' +\r\n '</script>\\n' +\r\n '\\n' +\r\n '<template>\\n' +\r\n ' <select\\n' +\r\n ' v-model=\"v\"\\n' +\r\n ' :disabled=\"disabled\"\\n' +\r\n ' :class=\"[\\n' +\r\n \" 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\\n\" +\r\n ' {\\n' +\r\n \" 'form-select': !small,\\n\" +\r\n \" 'form-select-small': small,\\n\" +\r\n \" 'form-select-x-small': xSmall,\\n\" +\r\n \" 'opacity-50': disabled\\n\" +\r\n ' }\\n' +\r\n ' ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\\n' +\r\n ' >\\n' +\r\n ' <slot />\\n' +\r\n ' </select>\\n' +\r\n '</template>\\n' +\r\n '\u003C/pre>\u003Cbr>\\n' +\r\n 'at /components/inputs/StyledSelect.vue'\r\n },\r\n statusCode: 500,\r\n fatal: false,\r\n unhandled: false,\r\n statusMessage: 'Vite Error',\r\n data: undefined,\r\n __nuxt_error: true\r\n```\n```\n",[3251,3254,3255,3256,3259],{"name":3252,"color":3253},"good first issue","fbca04",{"name":3234,"color":3235},{"name":3135,"color":3136},{"name":3257,"color":3258},"vite","3574D1",{"name":3260,"color":3241},"🔨 p3-minor",23822,"Issue with component since upgrading","2023-10-22T04:39:40Z","https://github.com/nuxt/nuxt/issues/23822",0.6687246,["Reactive",3267],{},["Set"],["ShallowReactive",3270],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9UzDiow6WbXmPlxpyGMGpKX1x_WBrgr8iknZvlMfwmI":-1},"/nuxt/ui/4355"]