\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.6415272,{"description":2882,"labels":2883,"number":2888,"owner":2874,"repository":2875,"state":2876,"title":2889,"updated_at":2890,"url":2891,"score":2892},"",[2884,2885],{"name":2868,"color":2869},{"name":2886,"color":2887},"v3","49DCB8",2346,"[Popover] Hover mode not working on mobile","2024-11-06T17:02:41Z","https://github.com/nuxt/ui/issues/2346",0.6956396,{"description":2894,"labels":2895,"number":2899,"owner":2874,"repository":2875,"state":2876,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Environment\n\nnode22, nuxtui300-b3 and nuxt3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv.3.0.0-beta3\n\n### Reproduction\n\nYou can reproduce from the components page for modal and drawer. Open the drawer, the bottom drawer appears, and rest of page shifts from removal of scrollbar. Same does not occur on the modal component.\n\n### Description\n\nThe modal component properly handles overflow and prevents shifting of the main page layout when open. The drawer component does not. Would like to see the drawer prevent layout shift from the scroll bar removal, like is done on the modals. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2896,2897,2898],{"name":2868,"color":2869},{"name":2886,"color":2887},{"name":2871,"color":2872},3523,"Drawer shifts layout unlike modal","2025-03-23T17:40:06Z","https://github.com/nuxt/ui/issues/3523",0.69673574,{"description":2905,"labels":2906,"number":2911,"owner":2874,"repository":2875,"state":2876,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Description\n\nI wanted to do something like the inline field label shown in the component examples in the docs, but couldn't find a suitable builtin. I think it's a nice halfway between MD's label-in-the-field strategy and while I could abuse the `leading` slot of the input, I think it makes more sense to be generic across input types. \n\n\n\nI did end up copy/pasting the source but it would be cool if the FormField (or something) had an `inline` variant that did this.\n\nFor reference:\nhttps://github.com/nuxt/ui/blob/50d68a636cc8b260dd3b8cf8afecb3b564b9d75d/docs/app/components/content/ComponentExample.vue#L162-L167\n\nThanks for your consideration 😄 \n\n### Additional context\n\n_No response_",[2907,2910],{"name":2908,"color":2909},"enhancement","a2eeef",{"name":2886,"color":2887},3543,"Inline Form Field Label","2025-03-14T11:13:49Z","https://github.com/nuxt/ui/issues/3543",0.71071327,{"description":2917,"labels":2918,"number":2921,"owner":2874,"repository":2875,"state":2922,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### 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```",[2919,2920],{"name":2868,"color":2869},{"name":2886,"color":2887},2655,"closed","Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.64721924,{"description":2928,"labels":2929,"number":2932,"owner":2874,"repository":2875,"state":2922,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.19.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.3\n- Builder: -\n- User Config: compatibilityDate, future, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.10\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/zhcndoc/zhcndoc\n\n### Description\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n WARN [vite:css][postcss] Lexical error on line 1: Unrecognized text. 15:18:30\n\n Erroneous area:\n1: infinity * 1px\n^..^\n1117| }\n1118| .rounded-full {\n1119| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n1120| }\n1121| .rounded-s {\n```",[2930,2931],{"name":2868,"color":2869},{"name":2886,"color":2887},3063,"Postcss warning appears when building","2025-01-14T04:16:48Z","https://github.com/nuxt/ui/issues/3063",0.68143034,{"description":2938,"labels":2939,"number":2943,"owner":2874,"repository":2874,"state":2922,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\r\n- Nuxt Version: `3.13.1`\r\n- CLI Version: `3.13.1`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `pnpm@9.3.0`\r\n- Builder: `-`\r\n- User Config: `compatibilityDate`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-yd89uq?file=app.vue,components%2FFoo.vue,components%2FBar.vue\n\n### Describe the bug\n\nI've noticed a few issues with component props after updating from Nuxt 3.12.3 to the latest version. I suspect it might be caused by enabling reactive props destructuring by default in Vue 3.5.\r\n\r\n1. setting default values for `boolean` props doesn't work (though it does for `string` props, for example)\r\n```ts\r\nconst {\r\n foo = true, // will be `false` if not provided\r\n bar = 'something', // will be `'something'` if not provided\r\n} = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n2. seemingly, all prop reactivity is lost when using reactive destructure (when changing the prop values, they do not update in the component)\r\n```ts\r\n// It works correctly if defined using the \"old\" way, though\r\nconst props = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n\r\n---\r\n\r\nThe behaviour was the same whether or not I had `vite.vue.script.propsDestructure` set to `true` in `nuxt.config` (though it should not be relevant now that it should be enabled by default?)\n\n### Additional context\n\nI tested it in vue SFC playground and it worked correctly there, so that's why I assume this might be a Nuxt issue\r\n\r\nhttps://play.vuejs.org/#eNqNUlFLwzAQ/ishLyqMFpm+zG6iMkEfdKiPAanttWamuZCkdTD6372kdA5x4tvd9313/fJdt/zKmKRrgc945gorjWcOfGsWQsvGoPXsBhvDKosNO0rS0AT50YXQQmfpMEJiajw0RuUeqGMsK2UXCyrjhnSA0wHP0j01n3DvCtSVrJO1Q01etkEseEGTUoF9NF6idoLPWGQClyuFn/cR87aFyYgX71B8/IKv3SZggq8sOLAdCL7jfG5r8AO9fH6ADdU7ssGyVaT+g3wCh6oNHgfZdatLsr2ni27vYqJS1y9uufGg3fioYDQo+6gXnBIOoR16+rfdaXIW54TuKcXxOj+PyVSu6znN0Zp4Kwrb+WFfhcjmY1I9lSVUUsPKonHZqLicsTdEBTnN9ovjk/8f/xaRjG/jZ3qyefgXeO3AhkDI/DQ5T055/wUEUtzf\n\n### Logs\n\n_No response_",[2940],{"name":2941,"color":2942},"pending triage","E99695",28845,"Issues with prop reactivity & default values when using reactive props destructure","2024-09-05T10:11:34Z","https://github.com/nuxt/nuxt/issues/28845",0.68207866,{"description":2949,"labels":2950,"number":2953,"owner":2874,"repository":2875,"state":2922,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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",[2951,2952],{"name":2908,"color":2909},{"name":2886,"color":2887},2712,"Side needs more direction","2024-11-20T19:59:29Z","https://github.com/nuxt/ui/issues/2712",0.6948809,{"labels":2959,"number":2964,"owner":2874,"repository":2874,"state":2922,"title":2965,"updated_at":2966,"url":2967,"score":2968},[2960,2961],{"name":2941,"color":2942},{"name":2962,"color":2963},"2.x","d4c5f9",7276,"Vuex mutations with enumerable properties","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7276",0.69609934,{"description":2970,"labels":2971,"number":2972,"owner":2874,"repository":2973,"state":2922,"title":2974,"updated_at":2975,"url":2976,"score":2977},"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,"nuxt.com","Dead showcase links","2024-03-11T22:26:22Z","https://github.com/nuxt/nuxt.com/issues/1530",0.698651,["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGMi8X_rFsYH0C-M3vDnAPH0DCJTVNEX0oZlkvumrsBw":-1},"/nuxt/ui/3341"]