\n \u003Ctemplate #content>\n \u003CUDropdownMenu\n :items=\"items\"\n >\n \u003CUButton label=\"Open Drop down\"/>\n \u003C/UDropdownMenu>\n \u003C/template>\n \u003C/UDrawer>\n\u003C/template>\n```\n\n### Logs\n\n```shell-script\nUncaught InternalError: too much recursion\n NuxtJS 5\n focus\n handleFocusOut\n ct\n f\n focus\n```",[2062,2063,2064],{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":2065,"color":2066},"reka-ui","56d799",3357,"Cant put dropdown inside drawer","2025-04-08T19:49:57Z","https://github.com/nuxt/ui/issues/3357",0.710524,{"description":2073,"labels":2074,"number":2086,"owner":1991,"repository":1991,"state":2054,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\r\n\r\nEvery Environment\r\n\r\n### Reproduction\r\n\r\nI really believe a reproduction is not needed but tell me otherwise and I create one.\r\n\r\n### Describe the bug\r\n\r\nRegarding `useLazyAsyncData` example: https://nuxt.com/docs/api/composables/use-lazy-async-data#example\r\n\r\n\u003Cimg width=\"809\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/47485736/12cb870f-c219-4642-a852-00ede0d74dc1\">\r\n\r\nWe are making a `watch` call in an async context in this example, after further investigation I found some docs in Vue 3 oficial site (https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher) that say the automatic process of stopping watchers does not work in async contexts. \r\n\r\nMy workaround for this was making a new hook called `useSafeWatch` that looks something like this:\r\n\r\n./useSafeWatch.ts\r\n```ts\r\nexport default useSafeWatch() {\r\n const watchersToBeCleaned = []\r\n onBeforeUnmount(() => {\r\n watchersToBeCleaned.forEach(stopWatcher => stopWatcher())\r\n })\r\n return {\r\n watch: (...args) => {\r\n watchersToBeCleaned.push(watch(...args))\r\n }\r\n }\r\n}\r\n```\r\n\r\n./usingTheHook.vue\r\n```js\r\n\u003Cscript setup>\r\nconst { watch } = useSafeWatch()\r\n\u003C/script>\r\n```\r\n\r\nAnother solution is making something like `unctx` and store the current context (vue instance in this case) in globalThis and window but this seems to be an upstream solution...\r\n\r\nIs this something worth implementing a PR? Computeds seem to be another issue here?\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2075,2077,2080,2083],{"name":2002,"color":2076},"8DEF37",{"name":2078,"color":2079},"discussion","538de2",{"name":2081,"color":2082},"3.x","29bc7f",{"name":2084,"color":2085},"performance","E84B77",23043,"Possible memory leak example in the docs could be a feature `useSafeWatch`","2024-04-03T09:49:04Z","https://github.com/nuxt/nuxt/issues/23043",0.71474683,{"description":2092,"labels":2093,"number":2096,"owner":1991,"repository":1992,"state":2054,"title":2097,"updated_at":2098,"url":2099,"score":2100},"### Description\n\nHow can I customize component styles in v3?\nI learned from `https://ui3.nuxt.dev/getting-started/theme` that styles can be customized in `app.config.ts` For example:\n```ts\nexport default defineAppConfig({\n uiPro: {\n header: {\n slots: {\n root: 'bg-[var(--ui-bg)]/75 backdrop-blur border-b border-[var(--ui-border)] sticky top-0 z-50',\n container: 'flex items-center justify-between gap-3 h-[var(--ui-header-height)]',\n left: 'lg:flex-1 flex items-center gap-1.5',\n center: 'hidden lg:flex',\n right: 'flex items-center justify-end lg:flex-1 gap-1.5',\n title: 'shrink-0 font-bold text-xl text-[var(--ui-text-highlighted)] flex items-end gap-1.5',\n toggle: 'lg:hidden',\n content: 'lg:hidden',\n overlay: 'lg:hidden',\n header: '',\n body: 'p-4 sm:p-6 overflow-y-auto'\n },\n variants: {\n toggleSide: {\n left: {\n toggle: '-ms-1.5'\n },\n right: {\n toggle: '-me-1.5'\n }\n }\n }\n }\n }\n})\n```\nHowever, after testing this approach, it doesn’t seem to work. So I’d like to ask specifically how to modify the style of an entire component in v3.\nFor instance, I want to customize the style of `UHeader`\nPlease forgive me if this is a silly question. English is not my native language, so I might have missed some details mentioned elsewhere.",[2094,2095],{"name":2017,"color":2018},{"name":2005,"color":2006},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.7269047,{"description":2102,"labels":2103,"number":2104,"owner":1991,"repository":2105,"state":2054,"title":2106,"updated_at":2107,"url":2108,"score":2109},"@harlan-zw hi!\r\n\r\nI may have missed it somewhere, although I've gone through the documentation completely.\r\nCan you please tell me if it is possible to add two or more GTM containers?\r\nIf so, how do I use them?\r\n\r\nIn brief - I need to use different gtm-id on different url's. And the GTM script should be loaded immediately, by default",[],154,"scripts","Two or more GTM containers","2024-08-07T02:22:06Z","https://github.com/nuxt/scripts/issues/154",0.7287429,["Reactive",2111],{},["Set"],["ShallowReactive",2114],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Q_ZS_tYm4gG6K2pKi5O677R84xz75M7jtp1O9hLBMxk":-1},"/nuxt/ui/3612"]