\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",[3061,3062,3065],{"name":3019,"color":3020},{"name":3063,"color":3064},"closed-by-bot","ededed",{"name":3066,"color":3064},"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.6417228,{"description":3073,"labels":3074,"number":3079,"owner":3028,"repository":3029,"state":3053,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.8.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: modules, plugins, css, colorMode, tiptap, runtimeConfig, nitro, routeRules, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.20.0, @pinia/nuxt@0.5.4, @vueuse/nuxt@11.1.0, nuxt-tiptap-editor@2.0.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n```\n\u003Cscript setup lang=\"ts\">\nenum DiscountType {\n Fixed = 0,\n Percentage = 1\n}\n\nconst types = [\n {\n label: \"€\",\n value: DiscountType.Fixed\n },\n {\n label: \"%\",\n value: DiscountType.Percentage\n }\n]\nconst type = ref\u003CDiscountType>(DiscountType.Fixed)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSelectMenu v-model=\"type\" :options=\"types\" value-attribute=\"value\" />\n\u003C/template>\n```\n\nSelectMenu does not display the label associated to the falsy value \"0\":\n\n\nThe list is populated with both values:\n\n\nThe label associated to the truthy value \"1\" is displayed as expected:\n\n\n### Description\n\nAll falsy values are not displayed anymore since v2.20.0 due to the rework of the computed `label` in the SelectMenu component.\n\nHere is the definition of this computed in `/src/runtime/components/form/SelectMenu.vue`:\n```\nconst label = computed(() => {\n if (!props.modelValue) return null\n\n if (Array.isArray(props.modelValue) && props.modelValue.length) {\n return `${props.modelValue.length} selected`\n } else if (['string', 'number'].includes(typeof props.modelValue)) {\n return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue\n }\n\n return accessor(props.modelValue as Record\u003Cstring, any>, props.optionAttribute)\n})\n```\n\n**The component should treat `0`, `\"\"` and `false` as \"acceptable\" labelled values.**\n\nI believe the first condition should be either :\n`if(props.modelValue == null) return null` \nOr:\n`if(props.modelValue === null || props.modelValue === undefined) return null` \n\n### Additional context\n\nI will try to find some time to create a pull request if this is accepted as an issue. Not sure I can manage to do it short-term though.\n\n### Logs\n\n```shell-script\n\n```",[3075,3076,3077,3078],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3063,"color":3064},{"name":3066,"color":3064},3132,"SelectMenu label not displayed for falsy values","2025-06-18T09:02:30Z","https://github.com/nuxt/ui/issues/3132",0.6660301,{"description":3085,"labels":3086,"number":3091,"owner":3028,"repository":3029,"state":3053,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.21.0\n- Build Modules: -\n\n### Version\n\nv2.21.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-sl6rquvy?file=app.vue\n\n### Description\n\nWhile the issue with passing a `false` value has been resolved in PR #1550, setting a numeric value of `0` still results in a binding problem. Specifically, when `0` is used as the value, the USelectMenu renders as blank and fails to display the intended option.\n\n**Steps to Reproduce:** \n1. Use the following reproduction code:\n\n```ts\n\u003Cscript setup lang=\"ts\">\nconst people = [{\n id: 0,\n name: 'Wade Cooper'\n}, {\n id: 1,\n name: 'Arlene Mccoy'\n}, {\n id: 2,\n name: 'Devon Webb'\n}, {\n id: 3,\n name: 'Tom Cook'\n}]\n\nconst selected = ref(people[0].id)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSelectMenu\n v-model=\"selected\"\n :options=\"people\"\n placeholder=\"Select people\"\n value-attribute=\"id\"\n option-attribute=\"name\"\n />\n\u003C/template>\n```\n\n2. Notice that the USelectMenu remains blank despite the initial value being set to `0`.\n\n**Expected Behavior:** \nThe USelectMenu should correctly bind and display the option corresponding to the numeric value `0`.\n\nCould you please consider looking into this issue so that numeric `0` is handled correctly, similar to how `false` is now working?\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3087,3088,3089,3090],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3063,"color":3064},{"name":3066,"color":3064},3392,"USelectMenu: Numeric value 0 causes binding issue","2025-06-18T09:01:56Z","https://github.com/nuxt/ui/issues/3392",0.66632473,{"description":3097,"labels":3098,"number":3106,"owner":3028,"repository":3028,"state":3053,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.1.0\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.7.0-28295243.3e9302a\r\n- Package Manager: npm@9.6.4\r\n- Builder: -\r\n- User Config: devtools, build, plugins, imports, nitro, modules, eslint, css, pinia, alias, colorMode, vite\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.4, @pinia/nuxt@0.5.1, @nuxtjs/eslint-module@4.1.0, @nuxt/image@1.3.0, @nuxtjs/i18n@8.1.1, nuxt-icon@0.6.8, @vueuse/nuxt@10.7.2, @nuxtjs/color-mode@3.3.2, @nuxtjs/supabase@1.1.6\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\ncreate component with \r\n`const modelValue = defineModel\u003Cstring | null | undefined>({\r\n set(value: string) {\r\n if (value) {\r\n return value.trim();\r\n }\r\n return value;\r\n },\r\n});`\r\n\r\nfollowing declaration of defineModel gives `No overload matches this call.\r\n The last overload gave the following error.ts(2769)\r\n ` error\r\n\r\nalso \r\n`const modelValue = defineModel\u003Cstring, \"trim\">();\r\n` is not working, it is throwing `Expected 1 type arguments, but got 2.`\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nfollowing declaration of defineModel gives `No overload matches this call.\r\n The last overload gave the following error.ts(2769)\r\n ` error\r\n\r\n### Additional context\r\n\r\nthose are functionalities from official Vue 3.4 documentation https://vuejs.org/api/sfc-script-setup.html#modifiers-and-transformers\r\n\r\n### Logs\r\n\r\n_No response_",[3099,3102,3103],{"name":3100,"color":3101},"3.x","29bc7f",{"name":3050,"color":3051},{"name":3104,"color":3105},"needs reproduction","FBCA04",25844,"defineModel doesnt know set option","2024-02-17T22:15:46Z","https://github.com/nuxt/nuxt/issues/25844",0.66732,{"description":3112,"labels":3113,"number":3116,"owner":3028,"repository":3029,"state":3053,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### 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```",[3114,3115],{"name":3019,"color":3020},{"name":3022,"color":3023},3983,"Default values are not loaded in the v-model","2025-06-30T13:04:54Z","https://github.com/nuxt/ui/issues/3983",0.6680956,{"description":3122,"labels":3123,"number":3126,"owner":3028,"repository":3029,"state":3053,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.4.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: bun@1.2.5\n- Builder: -\n- User Config: devtools, modules, imports, components, css, compatibilityDate, experimental, future\n- Runtime Modules: @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/recursing-browser-klwx46\n\n### Description\n\nWhen a `SelectMenu` is wrapped in a custom component which is then consumed by `FormField` validation is triggered for an instant before the component goes back to its valid state.\n\nI've tried to debug a bit and I think it's related to the fact that the `SelectMenu` uses `Input` and that input is firing a `change` event because it uses `useFormField`, even though that particular input should not be considered the \"form field\" in this instance.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/75e8c84f-612e-48f0-bf9e-dcc1fe95ffcd\n\nI'd like to open a PR and fix this myself but I'm not sure what the best approach it. Maybe `Input` could take a prop that allows it to not fire form events? i.e. `ignore-form-events=\"true\"` so the SelectMenu would use it. This could also apply for other components that use primitive form inputs inside them (Command, InputMenu) etc.\n\n### Logs\n\n```shell-script\n\n```",[3124,3125],{"name":3019,"color":3020},{"name":3022,"color":3023},3736,"[USelectMenu] Validation events are triggered before change when wrapped in a custom component","2025-05-14T17:24:48Z","https://github.com/nuxt/ui/issues/3736",0.66830134,{"description":3132,"labels":3133,"number":3142,"owner":3028,"repository":3028,"state":3053,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v18.14.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n**VsCode 1.79.2**\r\n- vscode.typescript-language-features: disabled\r\n- Vue.volar: 1.8.3, enabled\r\n- Vue.vscode-typescript-vue-plugin: 1.8.3, enabled\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/niklas-may/nuxt-module-issue-reproduction\r\n\r\n### Describe the bug\r\n\r\n**Preface**\r\n_Thank you for your amazing work on Nuxt! I am not sure where this issue is best raised, Nuxt, VsCode or Vue. But due to the special typescript tooling with auto imports, I thought it's best to start here, and would be happy to hear if anybody observed a similar behaviour or has a solution._ \r\n\r\n**Description**\r\nWhen I open `~/.nuxt/components.d.ts` in VsCode and hover over an imported component, VsCode IntelliSense popover displays the correct types for this component.\r\nBut when I use the component in any other components template block, for example `~/app.vue`, the typing is missing the prop types.\r\n\r\n### Component and Type Definitions\r\n\r\n`~/../src/runtime/MyButton.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv style=\"border: 1px solid pink\">\r\n \u003Cslot />\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nwithDefaults(\r\n defineProps\u003C{\r\n variant: \"fill\" | \"ghost\";\r\n }>(),\r\n { variant: \"fill\" }\r\n);\r\n\u003C/script>\r\n```\r\n\r\n`~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\ndeclare module 'vue' {\r\n export interface GlobalComponents {\r\n //...\r\n 'MyButton': typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n //...\r\n }\r\n}\r\n\r\nexport const MyButton: typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n\r\nexport const componentNames: string[]\r\n```\r\n\r\n\r\n### Correct Intellisense\r\n\r\nVsCode popopver hovering `'MyButton'` in `~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\n(property) GlobalComponents['MyButton']: __VLS_WithTemplateSlots\u003CDefineComponent\u003C{\r\n variant: {\r\n type: PropType\u003C\"fill\" | \"ghost\">;\r\n required: true;\r\n default: string;\r\n };\r\n}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>, {\r\n ...;\r\n}>\r\n````\r\n\r\n### Wrong Intellisense\r\n\r\nVsCode popopver hovering `\u003CMyButton />` in the template block of `~/app.vue` (or any other template)\r\n\r\n```TypeScript\r\n(property) 'MyButton': DefineComponent\u003C{}, {}, any>\r\n```\r\n\r\n### Additional context\r\n\r\nThe above example is the current state of the reproduction repo. But a different, but similar behavior happened in other reports (for example a yarn workspace repo). Strange enough, sometimes, it works fine...\r\n\r\n### Logs\r\n\r\n_No response_",[3134,3137,3138,3139],{"name":3135,"color":3136},"types","2875C3",{"name":3100,"color":3101},{"name":3050,"color":3051},{"name":3140,"color":3141},"upstream","E8A36D",21933,"Component appears to be untyped in template block","2023-12-12T14:36:22Z","https://github.com/nuxt/nuxt/issues/21933",0.6789341,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3Y5PbIvHBw2meT_P6aNgcDbIp4u-QR07u9VKoGH7QV4":-1},"/nuxt/ui/4528"]