\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```",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",3062,"nuxt","ui","open","The input box in the modal will automatically gain focus","2025-01-10T08:36:56Z","https://github.com/nuxt/ui/issues/3062",0.6850502,{"description":2882,"labels":2883,"number":2886,"owner":2874,"repository":2875,"state":2876,"title":2887,"updated_at":2888,"url":2889,"score":2890},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.4.0, @vueuse/nuxt@10.11.1, @nuxt/ui@2.19.2, @pinia/nuxt@0.5.5, nuxt-echarts@0.2.4\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-8d9s2j?file=app.vue\n\n### Description\n\nThe UInput component does not handle compositionstart and compositionend events, resulting in issues for languages that rely on input composition, such as Chinese (e.g., Pinyin input). Vue’s default behavior for v-model on native input elements ensures that updates are delayed until the composition ends, preventing intermediate values from triggering updates. However, the UInput component currently lacks this mechanism, causing inconsistencies with Vue’s default form handling and leading to unexpected behavior during text composition.\n\n### Additional context\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003Cinput 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\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```",[2884,2885],{"name":2868,"color":2869},{"name":2871,"color":2872},2713,"UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.71574014,{"description":2892,"labels":2893,"number":2903,"owner":2874,"repository":2875,"state":2904,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### Description\n\nThanks to the team for the wonderful UI library. I purchased a license for nuxt/ui-pro, but encountered an activation problem - after paying and receiving the key, I could not [activate](https://ui3.nuxt.dev/pro/activate) it, the system gave an error. `[POST] \"https://api.nuxtlabs.com/ui-pro/activate\": \u003Cno response> Failed to fetch`",[2894,2897,2900],{"name":2895,"color":2896},"question","d876e3",{"name":2898,"color":2899},"v3","49DCB8",{"name":2901,"color":2902},"pro","5BD3CB",3341,"closed","License key activation error","2025-02-17T12:02:07Z","https://github.com/nuxt/ui/issues/3341",0.690122,{"description":2910,"labels":2911,"number":2917,"owner":2874,"repository":2875,"state":2904,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.2`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `devtools`, `colorMode`, `ui`, `runtimeConfig`, `routeRules`, `future`, `compatibilityDate`, `telemetry`, `eslint`, `i18n`, `security`\n- Runtime Modules: `@nuxt/ui@3.0.0-alpha.11`, `@nuxt/eslint@0.7.5`, `@nuxtjs/i18n@9.1.1`, `@vueuse/nuxt@12.4.0`, `@pinia/nuxt@0.9.0`, `nuxt-security@2.1.5`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.11\n\n### Reproduction\n\nCheck the official documentation website and hover any button: https://ui3.nuxt.dev/components/button\n\n### Description\n\nWhen mouse hovering a button, the cursor must be changed to pointer!\n\nWhen a button has a cursor pointer, it provides a clear visual cue to users that the element is interactive. This enhances the user experience by making it obvious that clicking the button will trigger an action. Without this visual feedback, users might not realize that the button is clickable, leading to confusion or frustration.\n\nIn essence, the cursor pointer helps improve the usability and accessibility of web interfaces by making interactive elements more intuitive to use.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2912,2913,2916],{"name":2868,"color":2869},{"name":2914,"color":2915},"duplicate","cfd3d7",{"name":2898,"color":2899},3125,"Buttons are missing \"cursor pointer\"","2025-04-02T09:40:55Z","https://github.com/nuxt/ui/issues/3125",0.6913211,{"description":2923,"labels":2924,"number":2927,"owner":2874,"repository":2875,"state":2904,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\n-\n\n### Description\n\nDefault classes of container in [docs](https://ui3.nuxt.dev/components/container#theme) is:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\n**But no one of classes except `mx-auto` is not was created.**\nI change `--ui-container` variable like in [docs](https://ui3.nuxt.dev/getting-started/theme#container):\n```css\n/** app.css */\n\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --container-xl: 1280px;\n}\n\n:root {\n --ui-container: var(--container-xl);\n}\n```\nAs result, container classes is `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` and still not was created, except `mx-auto`.\n\nBut if i create `app.config.ts`:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\nAll is ok, width and other classes are created and applying.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2925,2926],{"name":2868,"color":2869},{"name":2898,"color":2899},2655,"Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.6917963,{"description":2933,"labels":2934,"number":2939,"owner":2874,"repository":2875,"state":2904,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### 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",[2935,2938],{"name":2936,"color":2937},"enhancement","a2eeef",{"name":2898,"color":2899},2712,"Side needs more direction","2024-11-20T19:59:29Z","https://github.com/nuxt/ui/issues/2712",0.69560385,{"description":2945,"labels":2946,"number":2948,"owner":2874,"repository":2875,"state":2904,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Description\n\nI would like to style my Radio component like this -\n\n\nBut Nuxt UI default styling gives me this. Without much ability to customize -\n\n\nI achieved the first styling in a very hacky way. I saw the DOM of the `\u003CURadioGroup>` component and used deep selector to style child tags. Some class selectors that are used are from tailwind like the items-start (styling code in the comment section). Not the best way, but it works.\n\nIs there a more elegant and straightforward way to do this?\n",[2947],{"name":2895,"color":2896},2950,"NuxtUI custom styling of URadioGroup component","2024-12-22T15:40:17Z","https://github.com/nuxt/ui/issues/2950",0.69611204,{"description":2954,"labels":2955,"number":2962,"owner":2874,"repository":2874,"state":2904,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.17.0\r\n- Nuxt Version: 3.7.0\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: ignore, modules, supabase, css, app, vite\r\n- Runtime Modules: nuxt-icon@0.5.0, @unocss/nuxt@0.56.1, @nuxtjs/supabase@1.1.2, @nuxtjs/color-mode@3.3.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nVue playground [[link](https://play.vuejs.org/#eNqNU01v2zAM/SuELo5Rwx7Qm+sE24octsM2dDvq4im069aWDIlOAwT+76XkJHXatOjBH+J7fHqkqL341vfpdkCRi8Ip2/QEDmnoV1I3XW8swR4sVgm/SkXNFhN4KkndHz7rqkJFMEJlTQcRC0U3UkutjHasRCXhnU+E5UlgsQdlBk05fIExZvYZtwrM6g0p7LZ4EUxgEcNyxSztTItpa+oZGsc3kGVAtqlrtO5VOlfzbnKVbst2wDjhujeIfc4iA3oPFwSn6hdvxSKc+hJqziFKZq247O0TUtVc6OjztdixnUbfto165G5OknupYWYiDd29uuLOnsIHyTPozInyiriJ/HmM/BTZNDE8K7wg7PqWhXgFUPwfiIyGryFnKcXBjxQrQkdFNuHMLbJZokgEOd6zaur0wRnNUxmMS6FM1zct2t89NexJinwqyWNl25qnnyHmDys5xtU9qscL8Qe38zEp/lh0aLcoxQmj0tZIE7z++wt3/H8CO7MZWmZ/AN4h92vwHifa90Fv2PaMF9z+CHer0fU/t94Rancsyhv1zDHwpeAbdftB6S92r9PrkMdHI8ZnXQJLPw==)]\r\nNuxt repro [[link](https://stackblitz.com/edit/github-q8xcd1?file=app.vue)]\r\n\r\n### Describe the bug\r\n\r\nI noticed some watchEffects in my application did not seem to be triggering. I thought it was a vue problem, but seeking help from the community, it seems that it was not an issue with vue itself. Then I was able to verify that the same effects indeed ran normally on vue, but not on nuxt.\r\n\r\nI was capable of reproducing it within the playgrounds. Here is the basic snippet of code I am using:\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { ref, reactive, watch, watchEffect } from 'vue';\r\n\r\nconst stateReact = reactive({ count: 0 });\r\nconst stateRef = ref({ count: 0 });\r\nwatch(stateReact, () => console.log(stateReact)); // triggers\r\nwatch(stateRef, () => console.log(stateRef.value), { deep: true }); // triggers\r\nwatchEffect(() => console.log('effect react: ', stateReact)); // do not trigger on nuxt\r\nwatchEffect(() => console.log('effect ref: ', stateRef.value)); // do not trigger on nuxt\r\n\r\nconst onClick = () => {\r\n stateReact.count++;\r\n stateRef.value.count++;\r\n console.log('clicked');\r\n};\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cbutton @click=\"onClick\">test\u003C/button>\r\n\u003C/template>\r\n```\r\n\r\nThe expected behavior: When clicking the button, 4 logs should be printed to the console.\r\n\r\nBut on nuxt, the watchEffects logs don't trigger. You can see that by opening the dev tools and watching the console on the repros.\r\n\r\nWith nuxt:\r\n\r\nhttps://github.com/nuxt/nuxt/assets/54607854/0030b818-9851-4fe0-9a0e-c4675a3e9f8c\r\n\r\nWith vue:\r\n\r\nhttps://github.com/nuxt/nuxt/assets/54607854/cf20a26d-ed7a-4b46-8596-98c92d66cb50\r\n\r\nI am assuming it is an issue, since it behaves differently.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2956,2959],{"name":2957,"color":2958},"3.x","29bc7f",{"name":2960,"color":2961},"pending triage","E99695",23628,"watchEffect is not triggering with reactive or ref objects","2023-10-18T19:57:30Z","https://github.com/nuxt/nuxt/issues/23628",0.6992972,{"description":2968,"labels":2969,"number":2973,"owner":2874,"repository":2874,"state":2904,"title":2974,"updated_at":2975,"url":2976,"score":2977},"I tried to watch my properties for change and than trigger a following function:\r\n```javascript\r\ndata(){\r\n return {\r\n isActive: false,\r\n unsavedChange = false\r\n }\r\n},\r\nwatch: {\r\n isActive: {\r\n handler: () => {\r\n this.$log.info('was changed')\r\n this.unsavedChange = true\r\n },\r\n deep: true\r\n }\r\n },\r\n```\r\nI can't access `this` - in the case of plugin ($log) I get error and `unsavedChange` do nothing in global scope.\r\n\r\nBut if I log just `this` out - it looks like a different instance of vue is created. Is this correct behaviour?\r\n\r\nthx\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/c2460\">#c2460\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2970],{"name":2971,"color":2972},"2.x","d4c5f9",2828,"Can't acces `this` in watch property","2023-01-18T16:02:39Z","https://github.com/nuxt/nuxt/issues/2828",0.7031522,{"description":2979,"labels":2980,"number":2982,"owner":2874,"repository":2875,"state":2904,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Description\n\nThere should be an option via Nuxt UI's configuration to disable all of the other modules:\r\n- @nuxt/icon\r\n- @nuxtjs/tailwindcss\r\n- @nuxtjs/color-mode\r\n\r\nThat way, if a user wanted access to the components, but entirely unstyled, they could still use Nuxt UI.\r\n\r\nCurrently, I have a use case for using UPopover, but not Tailwind, Nuxt Icon, or color mode. I could use Headless UI instead, but Nuxt UI's implementation of the hover mode is already complete and ready to use.\n\n### Additional context\n\n_No response_",[2981],{"name":2936,"color":2937},2162,"Disable @nuxt/icon, @nuxtjs/tailwindcss and @nuxtjs/color-mode modules via config","2024-09-10T16:29:53Z","https://github.com/nuxt/ui/issues/2162",0.7038348,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRK_sN2c_HLs8fBqtgVTRAFxm9_GxQ1pORq_xjUVP7Gk":-1},"/nuxt/ui/2346"]