\n```\n\n### Additional context\n\nhttps://github.com/nuxt/ui/blob/c00f6e8cdfd88eeba58812b78d94a2326c13f164/src/runtime/components/Checkbox.vue#L98",[2867,2870,2873],{"name":2868,"color":2869},"enhancement","a2eeef",{"name":2871,"color":2872},"v3","49DCB8",{"name":2874,"color":2875},"triage","ffffff",4176,"nuxt","ui","open","UCheckbox emits both `@input` and `@change` events on toggle, causing duplicate validations","2025-05-19T01:23:36Z","https://github.com/nuxt/ui/issues/4176",0.7833122,{"description":2885,"labels":2886,"number":2891,"owner":2877,"repository":2878,"state":2879,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Description\n\nI tried to create a generic method for the table action column, but TypeScript gives an error:\n\n```js\nimport type { Row } from '@tanstack/vue-table'\nimport UButton from '@nuxt/ui/runtime/components/Button.vue'\nimport UDropdownMenu from '@nuxt/ui/runtime/components/DropdownMenu.vue'\n\nexport const actionColumn = (row: Row\u003Cany>, getRowItems: (row: Row\u003Cany>) => any[]) => {\n return h(\n 'div',\n { class: 'text-right' },\n h(\n UDropdownMenu, // \u003C-- Error\n {\n content: {\n align: 'end'\n },\n items: getRowItems(row)\n },\n () => h(UButton, {\n icon: 'i-lucide-ellipsis-vertical',\n color: 'neutral',\n variant: 'ghost',\n class: 'ml-auto'\n })\n )\n )\n}\n```\n\nLint error:\n```\nNo overload matches this call.\n The last overload gave the following error.\n Argument of type '\u003CT extends DropdownMenuItem>(__VLS_props: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"props\"], __VLS_ctx?: __VLS_PrettifyLocal\u003CPick\u003CNonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>, \"attrs\" | \"emit\" | \"slots\">>, __VLS_expose?: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"expose\"], __VLS_setup?: Promise\u003C...>) => import(\"vue\").VNo...' is not assignable to parameter of type 'string | Component\u003C{ readonly \"onUpdate:open\"?: ((payload: boolean) => any) | undefined; size?: \"sm\" | \"md\" | \"xs\" | \"lg\" | \"xl\" | undefined; items?: DropdownMenuItem[] | DropdownMenuItem[][] | undefined; ... 11 more ...; modal?: boolean | undefined; } & VNodeProps & AllowedComponentProps>'.\n Type '\u003CT extends DropdownMenuItem>(__VLS_props: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"props\"], __VLS_ctx?: __VLS_PrettifyLocal\u003CPick\u003CNonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>, \"attrs\" | \"emit\" | \"slots\">>, __VLS_expose?: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"expose\"], __VLS_setup?: Promise\u003C...>) => import(\"vue\").VNo...' is not assignable to type 'FunctionalComponent\u003C{ readonly \"onUpdate:open\"?: ((payload: boolean) => any) | undefined; size?: \"sm\" | \"md\" | \"xs\" | \"lg\" | \"xl\" | undefined; items?: DropdownMenuItem[] | DropdownMenuItem[][] | undefined; ... 11 more ...; modal?: boolean | undefined; } & VNodeProps & AllowedComponentProps, {}, any, {}>'.\n Types of parameters '__VLS_ctx' and 'ctx' are incompatible.\n Type 'Omit\u003C{ attrs: Data; slots: Readonly\u003CInternalSlots>; emit: (event: string, ...args: any[]) => void; expose: \u003CExposed extends Record\u003Cstring, any> = Record\u003Cstring, any>>(exposed?: Exposed | undefined) => void; }, \"expose\">' is not assignable to type '{ emit: (evt: \"update:open\", payload: boolean) => void; slots: (Readonly\u003C{ default(props: { open: boolean; }): any; item: SlotProps\u003CDropdownMenuItem>; 'item-leading': SlotProps\u003C...>; 'item-label': SlotProps\u003C...>; 'item-trailing': SlotProps\u003C...>; } & (Record\u003C...> | (Record\u003C...> & Record\u003C...>))> & { ...; }) & (Record\u003C...'.\n Types of property 'slots' are incompatible.\n Type 'Readonly\u003CInternalSlots>' is not assignable to type '(Readonly\u003C{ default(props: { open: boolean; }): any; item: SlotProps\u003CDropdownMenuItem>; 'item-leading': SlotProps\u003CDropdownMenuItem>; 'item-label': SlotProps\u003C...>; 'item-trailing': SlotProps\u003C...>; } & (Record\u003C...> | (Record\u003C...> & Record\u003C...>))> & { ...; }) & (Record\u003C...> | (Record\u003C...> & Record\u003C...>))'.ts(2769)\n```\n\n\nAlthough there is this error, this piece of code actually works fine.\n\n\nref: https://ui3.nuxt.dev/components/table#with-row-actions\n\n\n",[2887,2890],{"name":2888,"color":2889},"question","d876e3",{"name":2871,"color":2872},2968,"Using UDropdownMenu with H causes a TSLint error in a separate utils file","2025-05-24T14:17:54Z","https://github.com/nuxt/ui/issues/2968",0.7835627,{"description":2897,"labels":2898,"number":2905,"owner":2877,"repository":2877,"state":2879,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Environment\n\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-1ys8s7?file=useApi.ts\n\n### Describe the bug\n\nWe recently ran into an edge case with `useAsyncData`. In some specific scenarios using `getCachedData` and `transform` it seems that the inference is broken and it expects the return value of the handler function to match the return value of `getCachedData`. \n\n```ts\nimport { useNuxtApp, useAsyncData } from 'nuxt/app';\nimport { toValue } from 'vue';\n\ntype ApiResponseFoo = { foo: string };\ntype ApiResponseBar = { bar: string };\n\nconst API = {\n foo: async function foo(): Promise\u003CApiResponseFoo> {\n return Promise.resolve({\n foo: 'hello, world',\n });\n },\n bar: async function bar(): Promise\u003CApiResponseBar> {\n return Promise.resolve({\n bar: 'hello, world',\n });\n },\n};\n\nexport default function useFooAPI() {\n const nuxtApp = useNuxtApp();\n return useAsyncData(\n async () => { \n return API.foo(); // Type error here, expects string\n },\n {\n transform: (response) => response.foo,\n getCachedData: (key: string) => {\n return (toValue(nuxtApp._asyncData[key]?.data) as string) ?? undefined;\n },\n }\n );\n}\n```\n\nIt seems that all the stars need to be misaligned for this error to occur. Making any of the following changes clears the error:\n\n- Remove the explicit `key: string` typing in `getCachedData`\n- Use the `nuxtApp` instance that is passed into `getCachedData` instead of calling `useNuxtApp()`\n- Adding explicit typing to the `transform` e.g. `(response: ApiResponseFoo) => response.foo`\n- Changing the definition of `getCachedData` to have `undefined` within the `NoInfer`: `(key: string, nuxtApp: NuxtApp) => NoInfer\u003CDataT | undefined>`\n\nIt's a bit beyond my TypeScript knowledge to say why this is happening, but I thought I'd report it here in case anyone else has ideas. \n\nDoes it make sense to make the `NoInfer` change in Nuxt? While this specific bug is quite easy to workaround, perhaps there are other cases where the inference is incorrect?\n\n### Additional context\n\nRelated issues:\n\nhttps://github.com/nuxt/nuxt/pull/25946\nhttps://github.com/nuxt/nuxt/pull/28187\n\n### Logs\n\n_No response_",[2899,2902],{"name":2900,"color":2901},"good first issue","fbca04",{"name":2903,"color":2904},"types","2875C3",29567,"Incorrect type inference in `useAsyncData` with `transform` and `getCachedData`","2025-02-11T18:25:03Z","https://github.com/nuxt/nuxt/issues/29567",0.78465563,{"description":2911,"labels":2912,"number":2916,"owner":2877,"repository":2917,"state":2918,"title":2919,"updated_at":2920,"url":2921,"score":2922},"",[2913],{"name":2914,"color":2915},"marketing","f5c828",650,"nuxt.com","closed","[Resources] Fill `Showcases` page description","2022-11-17T11:46:06Z","https://github.com/nuxt/nuxt.com/issues/650",0.7171319,{"description":2924,"labels":2925,"number":2916,"owner":2877,"repository":2932,"state":2918,"title":2933,"updated_at":2934,"url":2935,"score":2922},"Looks like there might be a regression with [in-source testing](https://vitest.dev/guide/in-source.html#typescript):\r\n\r\nhttps://github.com/logotip4ik/keycap/pull/16",[2926,2929],{"name":2927,"color":2928},"bug","d73a4a",{"name":2930,"color":2931},"vitest-environment","b60205","test-utils","in-source testing support","2024-01-28T11:09:41Z","https://github.com/nuxt/test-utils/issues/650",{"description":2937,"labels":2938,"number":2941,"owner":2877,"repository":2878,"state":2918,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### Environment\n\nn/a\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nn/a\n\n### Reproduction\n\nif you go https://ui3.nuxt.dev/getting-started/license and then change `ui-pro` to `ui` it doesn't redirect. and on refresh it changes `ui` to `ui-pro`\n\n### Description\n\nto behave like https://ui3.nuxt.dev/getting-started/fonts when you change from `nuxt` to `vue`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2939,2940],{"name":2927,"color":2928},{"name":2871,"color":2872},2840,"docs: not redirecting after changine the UI pro to UI","2024-12-09T11:21:47Z","https://github.com/nuxt/ui/issues/2840",0.728488,{"description":2947,"labels":2948,"number":2956,"owner":2877,"repository":2932,"state":2918,"title":2957,"updated_at":2958,"url":2959,"score":2960},"I'm setting up the nuxt-vitest module in my project. Though I'm running into some issues getting a simple test, I use mountSuspended(Logo) to test the mounting of a Logo component. This component uses i18n. Whereas when I'm using mount from Vitest the test passes.\r\n\r\nThe error I'm getting is as follows:\r\n```\r\nVitest caught 1 unhandled error during the test run.\r\nThis might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\r\nSyntaxError: Need to install with `app.use` function\r\n ❯ Module.createCompileError ../node_modules/.pnpm/@intlify+message-compiler@9.3.0-beta.17/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19\r\n ❯ createI18nError ../node_modules/.pnpm/vue-i18n@9.3.0-beta.17_vue@3.3.4/node_modules/vue-i18n/dist/vue-i18n.runtime.mjs:97:34\r\n 96| [I18nErrorCodes.INVALID_ARGUMENT]: 'Invalid argument',\r\n 97| [I18nErrorCodes.MUST_BE_CALL_SETUP_TOP]: 'Must be called at the top of a `setup` function',\r\n 98| [I18nErrorCodes.NOT_INSLALLED]: 'Need to install with `app.use` function',\r\n | ^\r\n 99| [I18nErrorCodes.UNEXPECTED_ERROR]: 'Unexpected error',\r\n 100| [I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE]: 'Not available in legacy mode',\r\n ❯ Module.useI18n ../node_modules/.pnpm/vue-i18n@9.3.0-beta.17_vue@3.3.4/node_modules/vue-i18n/dist/vue-i18n.runtime.mjs:2253:15\r\n ❯ setup app.vue:33:40\r\n```\r\n\r\nAnd while we are at it. Is there a way to test with the translated i18n messages iso the keys?\r\n\r\n######\r\n\r\nHere are some snippets from my configuration.\r\nvitest.config.js\r\n```\r\n...\r\nexport default defineVitestConfig({\r\n resolve: {\r\n alias\r\n },\r\n test: {\r\n dir: tests,\r\n setupFiles: ['tests/unit.setup.ts'],\r\n environment: 'jsdom',\r\n globals: true,\r\n root: rootDir,\r\n environmentOptions: {\r\n nuxt: {\r\n rootDir\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\n./test/nuxt/components/Logo.nuxt.spec.ts (with mountSuspended)\r\n```\r\nimport { describe, it, expect } from 'vitest'\r\n\r\nimport { mountSuspended } from 'vitest-environment-nuxt/utils'\r\nimport Logo from '@/components/header/Logo.vue'\r\n\r\ndescribe('HeaderLogo', () => {\r\n it('can mount some component', async () => {\r\n const component = await mountSuspended(Logo)\r\n expect(component.vm).toBeTruthy()\r\n expect(component.text()).toMatchInlineSnapshot(\r\n '\"global.logo-brand-name.global.logo-brand-localehomepage.logo-tagline\"'\r\n )\r\n })\r\n})\r\n```\r\n./tests/unit.setup.ts\r\n```\r\nimport { config } from '@vue/test-utils'\r\nimport { createI18n } from 'vue-i18n'\r\n\r\nimport nlNL from '~/locales/nl_NL.json'\r\n\r\nconst i18n = createI18n({\r\n legacy: false,\r\n locale: 'nl_NL',\r\n missing: (_, key) => key,\r\n messages: {\r\n nlNL\r\n }\r\n})\r\n\r\nconfig.global.mocks = {\r\n t: msg => msg\r\n}\r\nconfig.global.plugins.push(i18n)\r\n```\r\n\r\n\r\n./tests/nuxt/components/Logo.nuxt.spec.ts (without mountSuspended)\r\n```\r\nimport { mount } from '@vue/test-utils'\r\nimport { describe, it, expect } from 'vitest'\r\n\r\nimport Logo from '@/components/header/Logo.vue'\r\n\r\ndescribe('HeaderLogo', () => {\r\n it('can mount some component', () => {\r\n const component = mount(Logo)\r\n expect(component.vm).toBeTruthy()\r\n expect(component.text()).toMatchInlineSnapshot(\r\n '\"global.logo-brand-name.global.logo-brand-localehomepage.logo-tagline\"'\r\n )\r\n })\r\n})\r\n```\r\n\r\n",[2949,2950,2953],{"name":2930,"color":2931},{"name":2951,"color":2952},"needs reproduction","DE7793",{"name":2954,"color":2955},"closed-by-bot","ededed",585,"mountSuspended with i18n","2025-01-22T12:49:12Z","https://github.com/nuxt/test-utils/issues/585",0.7403855,{"description":2962,"labels":2963,"number":2966,"owner":2877,"repository":2878,"state":2918,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\n\nI want to configure my Nuxt UI v3 project only to use black and white colors with the neutral palette from Tailwind, similar to the one found in shadcn. I understand Nuxt UI supports Tailwind CSS theming, but I’m unsure of the best/recommended way to override all component colors globally",[2964,2965],{"name":2888,"color":2889},{"name":2871,"color":2872},3200,"How to create a black & white only theme in Nuxt UI v3","2025-02-09T12:59:38Z","https://github.com/nuxt/ui/issues/3200",0.7466993,{"description":2972,"labels":2973,"number":2979,"owner":2877,"repository":2878,"state":2918,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nChart is one of many things found when developing a statistics such as in dashboard admin. It would be good if nuxt ui have this component.\n\n### Additional context\n\n_No response_",[2974,2977,2978],{"name":2975,"color":2976},"duplicate","cfd3d7",{"name":2868,"color":2869},{"name":2871,"color":2872},2673,"Chart component","2024-11-18T08:33:07Z","https://github.com/nuxt/ui/issues/2673",0.74952537,{"description":2985,"labels":2986,"number":2990,"owner":2877,"repository":2878,"state":2918,"title":2991,"updated_at":2992,"url":2993,"score":2994},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.0.0-beta.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nHere's a demo (https://codesandbox.io/p/devbox/nuxtui3-bug-3432-sphrpl)\n\n**index.vue**\n```\n\u003Ctemplate>\n \u003CUContainer>\n \u003CFooModal @some-action=\"fnHandleAction\" /> \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```",[2987,2988,2989],{"name":2927,"color":2928},{"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.76656795,["Reactive",2996],{},["Set"],["ShallowReactive",2999],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$faxnQCZiJrzw-I0C70A1J9mX59N0IWRibmfFquJUkI6I":-1},"/nuxt/nuxt.com/1255"]