\n \u003CUInput v-model=\"state.name1\" placeholder=\"...\" />\n\u003C/UModal>\n```\n\nWhen a modal contains one or more input boxes, the first input box will always get focus automatically.\nIf I manually add a close button in the upper right corner, it will trigger a validation when I click it. This is not good. How can I avoid the input box getting focus when opening the modal?\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[2876,2877],{"name":2857,"color":2858},{"name":2863,"color":2864},3062,"The input box in the modal will automatically gain focus","2025-01-10T08:36:56Z","https://github.com/nuxt/ui/issues/3062",0.632797,{"description":2884,"labels":2885,"number":2886,"owner":2866,"repository":2887,"state":2868,"title":2888,"updated_at":2889,"url":2890,"score":2891},"My icon file directory is nested, which means I'm creating multiple `customCollections`, like this: \n\n\nIs there a simpler way to write it?",[],316,"icon","Local custom nested folder usage issues","2025-03-16T06:02:57Z","https://github.com/nuxt/icon/issues/316",0.656508,{"description":2893,"labels":2894,"number":2898,"owner":2866,"repository":2867,"state":2868,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### 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```",[2895,2896,2897],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},3983,"Default values are not loaded in the v-model","2025-05-05T16:31:01Z","https://github.com/nuxt/ui/issues/3983",0.6891219,{"description":2904,"labels":2905,"number":2907,"owner":2866,"repository":2908,"state":2868,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### 🐛 The bug\n\nHi, I found this specific bug that occurs using layouts and having `pageTransition` and `layoutTransition` enabled in nuxt config. Then, you navigate between layouts and the last page has a video and is fetching something with `useFetch`, then, you try to play the video. The script loads, but the video doesn't play.\n\n\n\n- Steps to reproduce: _(It is recommended to open the preview in a new tab)_\n1. Start the reproduction\n2. You must be on the index page `/`\n3. Click `Go to Layout`\n4. Try to play the video\n5. The script loads, but the video doesn't play\n6. Inspect the console and you must see the error\n\n\n### 🛠️ To reproduce\n\nhttps://stackblitz.com/edit/nuxt-starter-aqvq3n\n\n### 🌈 Expected behavior\n\nThe video in /video should be played after clicking it\n\n### ℹ️ Additional context\n\nnuxt: 3.13.2\n@nuxt/scripts: 0.9.4\n\nBtw: this error doesn't occur if you enclose the script with `\u003CClientOnly>`",[2906],{"name":2857,"color":2858},297,"scripts","ScriptYouTubePlayer: Weird specific bug related to layouts, transitions and useFetch","2024-10-22T08:53:32Z","https://github.com/nuxt/scripts/issues/297",0.68984455,{"description":2914,"labels":2915,"number":2920,"owner":2866,"repository":2867,"state":2921,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAs of now, in Nuxt UI v3.0.0-alpha.x, the `SIDE_OPTIONS` constant is defined as follows:\n\n``` ts\nconst SIDE_OPTIONS: [\"top\", \"right\", \"bottom\", \"left\"];\n```\n\nThe current four directions cannot meet the practical development needs. For example, when there is a button on the far right of the screen to open a dropdown menu, it cannot automatically appear as 'bottom-right'.Tooltips, dropdown menus, or popovers may require positioning beyond the basic cardinal directions to avoid obscuring content or to better fit within the viewport.\n\n#### Proposed Enhancement\n\nI propose to extend the SIDE_OPTIONS constant to include combinations of the cardinal directions to allow for greater flexibility and finer control over positioning. The updated SIDE_OPTIONS would be:\n\n``` ts\nconst SIDE_OPTIONS = [\n \"top\", \"right\", \"bottom\", \"left\",\n \"bottom-left\", \"bottom-right\",\n \"left-top\", \"left-bottom\",\n \"top-left\", \"top-right\",\n \"right-top\", \"right-bottom\"\n];\n```\n\n\n### Additional context\n\n| | |\n| ----------- | ----------- |\n|  | |\n\n\n",[2916,2919],{"name":2917,"color":2918},"enhancement","a2eeef",{"name":2860,"color":2861},2712,"closed","Side needs more direction","2024-11-20T19:59:29Z","https://github.com/nuxt/ui/issues/2712",0.63827264,{"description":2927,"labels":2928,"number":2931,"owner":2866,"repository":2932,"state":2921,"title":2933,"updated_at":2934,"url":2935,"score":2936},"Redirect to `/projects` public page instead\n\nBlocked by #403 ",[2929],{"name":2917,"color":2930},"1ad6ff",402,"nuxt.com","Beta page integration `/beta`","2022-06-07T09:41:42Z","https://github.com/nuxt/nuxt.com/issues/402",0.6418791,{"description":2938,"labels":2939,"number":2945,"owner":2866,"repository":2867,"state":2921,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: modules, devtools, app, css, runtimeConfig, future, compatibilityDate, telemetry, eslint\n- Runtime Modules: @nuxt/ui-pro@3.0.0, @nuxt/eslint@1.0.1, @vueuse/nuxt@12.5.0, @nuxt/image@1.9.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3\n\n### Reproduction\n\nSee below\n\n### Description\n\nHey,\n\nIn UI2 when placing a UAvatar (which often is done for a user dropdown) in the DropdownMenu - clicking the Dropdown menu would trigger opening the dropdown.\nBased on UI3 docs it seems that it should work since it says Button or any other element - however this doesnt work\n\n### Additional context\n\n```ts\n\u003CUDropdownMenu :items=\"accountItems\">\n \u003CUAvatar\n v-if=\"session && session.user\"\n :src=\"session.user.image ? session.user.image : undefined\"\n :alt=\"session.user.name\"\n size=\"md\"\n />\n\u003C/UDropdownMenu>\n```\n\n### Logs\n\n```shell-script\n\n```",[2940,2941,2944],{"name":2857,"color":2858},{"name":2942,"color":2943},"needs reproduction","CB47CF",{"name":2860,"color":2861},3546,"`UAvatar` doesn't trigger `UDropdownMenu`","2025-03-28T17:43:01Z","https://github.com/nuxt/ui/issues/3546",0.6527949,{"description":2951,"labels":2952,"number":2953,"owner":2866,"repository":2932,"state":2921,"title":2954,"updated_at":2955,"url":2956,"score":2957},"Multiple links in showcase links to either dead sites or dead pages on the sites. I have attached a few. Also the russian mcdonalds site is on there\r\nhttps://mcdonalds.ru/\r\nhttps://ai.marketing/user/robot\r\nhttps://game.fonts.adobe.com/\r\nhttps://annual.awwwards.com/\r\nhttps://globalmaintainersummit.github.com/\r\nhttps://vintageria.it/\r\nhttps://hyundaiusa.com/",[],1530,"Dead showcase links","2024-03-11T22:26:22Z","https://github.com/nuxt/nuxt.com/issues/1530",0.6594869,{"description":2959,"labels":2960,"number":2967,"owner":2866,"repository":2866,"state":2921,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nHere is a minimal reproduction:\r\n[https://stackblitz.com/edit/github-u8yyoy?file=app.vue](https://stackblitz.com/edit/github-u8yyoy?file=app.vue)\r\n\r\n### Describe the bug\r\n\r\n`v-model` is behaving weirdly when a value is already set while mounting the component.\r\n\r\nIn the following example the select box initially shows option `A` then the Component re-renders and shows the correct option `B`. However the selected ref is set to `3` from the beginning according to the output in the console when I'm logging the `selected` ref.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cselect v-model=\"selected\">\r\n \u003Coption value=\"2\">A\u003C/option>\r\n \u003Coption value=\"3\">B\u003C/option>\r\n \u003Coption value=\"4\">C\u003C/option>\r\n \u003C/select>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nconst selected = ref('3');\r\n\u003C/script>\r\n```\r\n\r\nWhen using the `v-bind` directive and `@change`, everything works fine.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cselect @change=\"(e) => selectedValue = e.target.value\">\r\n \u003Coption value=\"4\" :selected=\"isSelected('4')\">A\u003C/option>\r\n \u003Coption value=\"5\" :selected=\"isSelected('5')\">B\u003C/option>\r\n \u003Coption value=\"6\" :selected=\"isSelected('6')\">C\u003C/option>\r\n \u003C/select>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nconst selected = ref('6');\r\nconst isSelected = (value) => selectedValue.value === value\r\n\u003C/script>\r\n```\r\n\r\nMoreover, this error occurs only when using a select box. Other types of input fields (checkbox, radio button, text input) work. Also when doing the same in plain Vue 3 it works.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2961,2964],{"name":2962,"color":2963},"3.x","29bc7f",{"name":2965,"color":2966},"upstream","E8A36D",15631,"Select box with v-model updates lazy when mounting the component","2023-01-19T18:30:04Z","https://github.com/nuxt/nuxt/issues/15631",0.662617,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQ4KxInEVnbzxzZE-GQ0xvsbgZRpf0bmW9MXA9ielnOY":-1},"/nuxt/ui/3635"]