\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.65287006,{"description":2884,"labels":2885,"number":2890,"owner":2866,"repository":2867,"state":2868,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[2886,2889],{"name":2887,"color":2888},"question","d876e3",{"name":2860,"color":2861},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.65601236,{"description":2896,"labels":2897,"number":2899,"owner":2866,"repository":2900,"state":2868,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### 🐛 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>`",[2898],{"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.6705287,{"description":2906,"labels":2907,"number":2911,"owner":2866,"repository":2867,"state":2868,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### 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```",[2908,2909,2910],{"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.6785582,{"description":2917,"labels":2918,"number":2919,"owner":2866,"repository":2920,"state":2868,"title":2921,"updated_at":2922,"url":2923,"score":2924},"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.6797218,{"description":2926,"labels":2927,"number":2933,"owner":2866,"repository":2867,"state":2934,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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```",[2928,2929,2932],{"name":2857,"color":2858},{"name":2930,"color":2931},"needs reproduction","CB47CF",{"name":2860,"color":2861},3546,"closed","`UAvatar` doesn't trigger `UDropdownMenu`","2025-03-28T17:43:01Z","https://github.com/nuxt/ui/issues/3546",0.6459818,{"description":2940,"labels":2941,"number":2947,"owner":2866,"repository":2867,"state":2934,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.12.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/image@1.8.1, @nuxt/content@2.13.4, @nuxthq/studio@1.1.2, @nuxt/ui-pro@3.0.0-alpha.10, @nuxtjs/plausible@1.2.0, @nuxtjs/seo@2.0.2, @vueuse/nuxt@12.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0.alpha10\n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/button#loading (example with `loading-auto`)\n\n### Description\n\nWhen using a `UIButton` component with an `@click` event, the cursor does not change to `cursor-pointer`, which may confuse users about the button's clickability.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2942,2943,2946],{"name":2857,"color":2858},{"name":2944,"color":2945},"duplicate","cfd3d7",{"name":2860,"color":2861},2940,"`cursor-pointer` is missing on `UButton` with an `@click` event","2025-04-02T09:37:12Z","https://github.com/nuxt/ui/issues/2940",0.65663594,{"description":2953,"labels":2954,"number":2955,"owner":2866,"repository":2956,"state":2934,"title":2957,"updated_at":2958,"url":2959,"score":2960},"After using `pnpm update` to upgrade vue to 3.4.3, the console throws a lot of `Hydration mismatch`. If I am using vue 3.3.13, no `Hydration mismatch` warnings will be thrown.\r\n\r\n\u003Cimg width=\"1402\" alt=\"SCR-20240103-qagg\" src=\"https://github.com/nuxt/nuxt.com/assets/133459587/188ac1c4-e19a-4570-a5d0-4863c92a7bda\">\r\n",[],1467,"nuxt.com","About vue@3.4.3 causing hydration mismatch","2024-05-03T00:34:36Z","https://github.com/nuxt/nuxt.com/issues/1467",0.6592627,{"description":2962,"labels":2963,"number":2966,"owner":2866,"repository":2867,"state":2934,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\n\ni noticed that NUXT UI / NUXT UI PRO were refactored to use tailwind's new version 3 stuff + radix...\n\ni just went to the tailwind docs today and it looks like they just skipped right past their new version 3 and went to version 4...\n\nany ideas how this effects NUXT UI/PRO? \n\nMy undersanding is that version 3->4 means it was a semver breaking change?",[2964,2965],{"name":2887,"color":2888},{"name":2860,"color":2861},3167,"tailwind version 4..?","2025-01-24T10:17:32Z","https://github.com/nuxt/ui/issues/3167",0.66670567,["Reactive",2972],{},["Set"],["ShallowReactive",2975],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVNNAuZ8Pmm03F3_A-mg482GMILHyT7ua46Kfnio3CkM":-1},"/nuxt/ui/3523"]