\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```",[2909,2910,2911],{"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.70137954,{"description":2918,"labels":2919,"number":2923,"owner":2877,"repository":2878,"state":2891,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Description\n\nI'm trying to implement a table with a fixed footer row (total/summary row) that should always stay at the bottom and not be affected by sorting operations. Is there a built-in way to achieve this with UTable?\n\n**What I'm Trying to Achieve**\n- Column widths in the total row should match exactly with the UTable columns\n- Maintain visual consistency between table and total row\n- Keep the total row fixed at bottom (not affected by sorting)\n\n**Questions**\n1. Is there a prop or slot for footer rows in UTable?\n2. Are there any table features I might have missed in the documentation?\n3. What's the recommended way to handle summary rows in UTable?\n4. Is there a way to exclude specific rows from sorting?\n\n**Current Workaround**\nCurrently, I'm using a separate div below the table:\n\n### Currently\n\n\u003Cimg width=\"1271\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e0ae8507-7619-4bc7-9b89-8772da34852b\" />\n\n### Expected\n\n\u003Cimg width=\"1186\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/61bf37ec-4b5b-46dc-9e0f-cd9cd38b79c4\" />\n\n\n\n\nWould appreciate any guidance on achieving proper column alignment between UTable and the total row!",[2920],{"name":2921,"color":2922},"question","d876e3",3409,"How to implement fixed footer row in UTable?","2025-04-22T14:30:41Z","https://github.com/nuxt/ui/issues/3409",0.7097063,{"description":2929,"labels":2930,"number":2931,"owner":2877,"repository":2932,"state":2891,"title":2933,"updated_at":2934,"url":2935,"score":2936},"Hello everyone,\r\n\r\nI have a few questions about Nuxt test-utils.\r\n\r\nMy situation:\r\n\r\n- I have a Vue.js project with Vue test-utils;\r\n- I have a Nuxt.js project where I would like to add testing;\r\n\r\nI'm looking into different options for libraries to test my Nuxt.js project. Ideally, I would like to have something very similar to Vue test-utils, in order to avoid headaches when working on both projects. Nuxt test-utils seems like an interesting option, but I was wondering what are its advantages compared to just using Vue test-utils? Thanks!",[],451,"test-utils","Question: Vue test-utils vs Nuxt test-utils","2023-12-02T00:13:11Z","https://github.com/nuxt/test-utils/issues/451",0.71073633,{"description":2938,"labels":2939,"number":2940,"owner":2877,"repository":2941,"state":2891,"title":2942,"updated_at":2943,"url":2944,"score":2945},"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.71562004,{"description":2947,"labels":2948,"number":2951,"owner":2877,"repository":2878,"state":2891,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Description\n\nHi, \n\nIn NuxtUI v2, I saved my custom configs in `.ts` files and imported the default configs to use as types:\n\n```ts\nimport type { DeepPartial } from '#ui/types';\nimport type { tabs as TabsConfig } from '#ui/ui.config';\n\nexport const tabsV1Config : DeepPartial\u003Ctypeof TabsConfig> = {\n...\n};\n```\n\nIn NuxtUI v3, it looks like the default themes are stored in the `.nuxt/ui/` directory, which makes it impossible to import into my project. The same css also seems to exist in the `dist/shared/ui.XXX.mjs` files. Is there a way to import these default configs in NuxtUI v3?",[2949,2950],{"name":2921,"color":2922},{"name":2871,"color":2872},3573,"Can I import the default component themes?","2025-03-17T16:55:26Z","https://github.com/nuxt/ui/issues/3573",0.7197368,{"description":2957,"labels":2958,"number":2961,"owner":2877,"repository":2878,"state":2891,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Description\n\nRight now there is no aria-* attributes in form inputs, that should be required to meet wcag aa:\n- associate form label elements with controls: id on the input and label-for in the label referencing the input id\n- aria-describedby for messages and errors on each form input\n- aria-invalid=\"true\" on each invalid form input (plus the aria-describedby referencing the error)\n- include form error recovery: via `Error alert, then focus`, `Errors on top` or `Inline errors`: I always use `Errors on top` + `Inline errors` (ui using inline errors)\n\nFor reference: https://webaim.org/techniques/formvalidation/\n\n\n### Additional context\n\n_No response_",[2959,2960],{"name":2888,"color":2889},{"name":2871,"color":2872},3111,"add a11y to form stuff","2025-01-25T13:14:07Z","https://github.com/nuxt/ui/issues/3111",0.7219059,{"description":2967,"labels":2968,"number":2972,"owner":2877,"repository":2877,"state":2891,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.8.1\r\n- Builder: -\r\n- User Config: srcDir, components, devtools, modules, vite, hooks, app, runtimeConfig\r\n- Runtime Modules: @vueuse/nuxt@10.11.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-vxspid?file=src%2Fplugins%2FclickOutside.ts\n\n### Describe the bug\n\nHello, not sure if you can help with this. I'm trying to implement a basic click outside functionality in a nuxt app.\r\nI'm trying to use @vueuse/components and I import @vueuse/nuxt in modules in nuxt config.\r\nmodules: [\r\n '@vueuse/nuxt',\r\n ],\r\n Then I create a plugin with this\r\n \r\n import { vOnClickOutside } from '@vueuse/components'\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n nuxtApp.vueApp.directive('clickOutside', vOnClickOutside)\r\n})\r\n\r\nHowever, I keep receiving this message after trying to use the dom element \u003COnClickOutside> in the HTML of the page :\r\n\r\n[Vue warn]: Failed to resolve component: OnClickOutside \r\nIf this is a native custom element, make sure to exclude it from \r\ncomponent resolution via compilerOptions.isCustomElement.\r\n\r\nIf I try to use the v-on-click-outside directive in the HTML I receive the following error : \r\n\r\n[Vue warn]: Failed to resolve directive: on-click-outside\r\n\r\nI don't know which would be a correct solution for this.\r\n\r\nThank you in advance for your help\r\n\r\nCarlota\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2969],{"name":2970,"color":2971},"pending triage","E99695",28060,"@vueuse/nuxt + @vueuse/components => vOnClickOutside","2024-07-05T22:04:25Z","https://github.com/nuxt/nuxt/issues/28060",0.7260644,["Reactive",2978],{},["Set"],["ShallowReactive",2981],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fopJVruesJnnGc_eIBdhZ7mk8y7C-23PTmEUfb7JOMqw":-1},"/nuxt/nuxt.com/1520"]