\u003Cbr />\n \u003CUButton @click=\"fnOpenModal\">Open FooModal from code\u003C/UButton>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n import { FooModal } from '#components';\n\n const overlay = useOverlay();\n\n const foo = overlay.create(FooModal);\n\n const fnOpenModal = async () => {\n foo.open();\n };\n\n const fnHandleAction = (action) => {\n console.log(\"Handle FooModal action: \", action);\n };\n\u003C/script>\n```\n\n**FooModal**\n```\n\u003Ctemplate>\n \u003CUModal v-model:open=\"open\" title=\"Foobar\">\n \u003CUButton label=\"Open FooModal from modal\" color=\"neutral\" variant=\"subtle\" />\n\n \u003Ctemplate #body>\n \u003CUButton @click=\"click()\" >Submit\u003C/UButton>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n const open = ref(false);\n\n const emits = defineEmits(['some-action']);\n\n const click = () => {\n console.log(\"clicked from inside the modal\");\n emits('some-action', 'closing'); //emits does not work if Modal opened using useOverlay.\n open.value = false; //closing modal does not work if Modal opened using useOverlay.\n };\n\u003C/script>\n```\n\n### Description\n\nHello Nuxt UI team,\n\nThank you for providing a high-quality UI library. I truly appreciate the effort you put into creating and maintaining it.\n\nI have encountered an issue while using `UModal` in my application. The modal is used to create and/or update database entries, and it needs to be opened in two different ways:\n\n1. Via a `UButton` that is always present on the screen (provided by the modal itself).\n2. Programmatically, through a link in a dropdown menu, using `useOverlay`.\n\nWhen the modal is opened using the first method, everything works as expected. However, when it is opened programmatically using the second method, the modal does not behave the same way. Specifically:\n\n- I am unable to trigger an `emit` to notify the parent component that the update was successful.\n- The modal does not close properly using the `open.value = false` technique.\n\nI am unsure if this behavior is intentional or a bug. I was under the impression that `UModal` and `useOverlay` should work seamlessly together and exhibit consistent behavior. Could you please confirm whether this is a valid concern?\n\nThank you for your time and attention to this matter. I look forward to your guidance.\n\n**Note**: You'll also notice that the button within the modal appears on the screen when opened using `useOverlay`. It would be helpful if it could be hidden automatically, but I believe this is something I can control easily. As such, I do not consider this to be a bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2935,2936,2937],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},3432,"UModal and useOverlay compatibility Issue","2025-03-11T13:57:03Z","https://github.com/nuxt/ui/issues/3432",0.73963755,{"description":2944,"labels":2945,"number":2953,"owner":2877,"repository":2878,"state":2903,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.1`\r\n- Nuxt Version: `3.13.2`\r\n- CLI Version: `3.14.0`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `npm@10.8.3`\r\n- Builder: `-`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Version\n\n1.4.3\n\n### Reproduction\n\nhttps://test-docs-819.pages.dev/\n\n### Description\n\nI encountered a styling issue with Nuxt Content components when deploying a static site using `npm run generate`. Initially, I thought the issue was specific to my project, but after testing the Nuxt UI Pro docs template (without any custom modifications), the problem persisted.\r\n\r\nWhen deploying the site to Cloudflare as a static site, the Nuxt Content components lose their proper styling, leading to an unstyled or poorly styled appearance in production. This issue does not occur in development mode.\r\n\r\nSteps to reproduce:\r\n1. Use the Nuxt UI Pro documentation template.\r\n2. Deploy the site as a static site using `npm run generate`.\r\n3. Host the generated site on Cloudflare.\r\n\r\nExpected result:\r\nThe Nuxt Content components should maintain their correct styling in production.\r\n\r\nActual result:\r\nNuxt Content components appear unstyled or with incorrect styling when deployed.\r\n\r\nAny guidance or help with this issue would be appreciated!\r\n\r\n\n\n### Additional context\n\n\r\n\u003Cimg width=\"1273\" alt=\"Screenshot 2024-10-01 at 3 47 53 PM\" src=\"https://github.com/user-attachments/assets/7fbd2248-d933-4997-bdc8-49bdf05e3042\">\r\n\r\n---\r\n\r\n\u003Cimg width=\"1099\" alt=\"Screenshot 2024-10-01 at 3 49 32 PM\" src=\"https://github.com/user-attachments/assets/0b86db6b-8490-4b00-a884-31bf51d6802a\">\r\n\r\n---\r\n\r\n\u003Cimg width=\"943\" alt=\"Screenshot 2024-10-01 at 3 50 49 PM\" src=\"https://github.com/user-attachments/assets/9021d63a-bf13-4dbc-bae7-26f266eff554\">\r\n\r\n---\r\n\r\nTOC little icon appear only in small screens:\r\n\r\n\u003Cimg width=\"398\" alt=\"Screenshot 2024-10-01 at 3 52 00 PM\" src=\"https://github.com/user-attachments/assets/f4fe87ff-42d5-4584-a461-9d70fbbaf8c5\">\r\n\r\n\n\n### Logs\n\n```shell-script\nNo Logs\n```\n",[2946,2947,2950],{"name":2868,"color":2869},{"name":2948,"color":2949},"pro","5BD3CB",{"name":2951,"color":2952},"upstream","78bddb",2287,"Nuxt Content Components Not Styled Properly in Production with Static Site on Cloudflare","2024-10-02T10:16:24Z","https://github.com/nuxt/ui/issues/2287",0.7409213,{"description":2959,"labels":2960,"number":2961,"owner":2877,"repository":2962,"state":2903,"title":2963,"updated_at":2964,"url":2965,"score":2966},"Clicking the button close the dialog but nothing happens. Either on chrome or firefox.\n\nCome from https://github.com/nuxt/nuxt/issues/30827\n",[],1777,"nuxt.com","Ask AI doesn't work for me","2025-02-05T10:21:53Z","https://github.com/nuxt/nuxt.com/issues/1777",0.74149674,{"description":2968,"labels":2969,"number":2973,"owner":2877,"repository":2878,"state":2903,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\n-\n\n### Description\n\nThe types of Icon are currently not exported.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2970,2971,2972],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},3567,"Type export missing for Icon","2025-03-15T11:13:51Z","https://github.com/nuxt/ui/issues/3567",0.75171435,{"description":2979,"labels":2980,"number":2985,"owner":2877,"repository":2878,"state":2903,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### Description\n\nThe concepts of Chips and Badges are reversed. \n\nChip is the component with text, to represent status or options selected, that can also have counters, icons aside labels and in some cases a remove button.\nBadge is the component that have a notification or a counter\n\nIn my opinion:\n\nThis is a chip ⤵️\n\n\nAnd this is a Badge ⤵️\n\n\nAn example\nhttps://medium.com/design-bootcamp/ux-blueprint-03-badges-vs-chips-tags-a-friendly-guide-e38ab2217be3#:~:text=Key%20Differences,users%20navigate%20and%20manage%20content.",[2981,2984],{"name":2982,"color":2983},"question","d876e3",{"name":2871,"color":2872},3282,"The concepts of Chips and Badges are reversed","2025-02-10T09:38:39Z","https://github.com/nuxt/ui/issues/3282",0.7542455,["Reactive",2991],{},["Set"],["ShallowReactive",2994],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fr2cc1KRBvFgFwbjyTIaRooC0gT557Cnd2QwzbwVXb0o":-1},"/nuxt/ui/2342"]