\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[2909,2912,2913],{"name":2910,"color":2911},"enhancement","a2eeef",{"name":2886,"color":2887},{"name":2914,"color":2915},"triage","ffffff",3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.71681035,{"labels":2922,"number":2929,"owner":2872,"repository":2872,"state":2930,"title":2931,"updated_at":2932,"url":2933,"score":2934},[2923,2926],{"name":2924,"color":2925},"2.x","d4c5f9",{"name":2927,"color":2928},"needs reproduction","FBCA04",9511,"closed","RangeError: Maximum call stack size exceeded","2023-01-21T23:09:47Z","https://github.com/nuxt/nuxt/issues/9511",0.6768736,{"description":2936,"labels":2937,"number":2939,"owner":2872,"repository":2872,"state":2930,"title":2940,"updated_at":2941,"url":2942,"score":2943},"\r\n\r\nI got this error when I use `v-for` dynamic components on server side render.\r\nIf data less then 10 records it's work fine and use client render it's work too.\r\nError only use server side render. How do I solve?\r\n\r\n` \u003Ccomponent v-for=\"element in dataItems\" :is=\"element.name\" :key=\"element.id\">\u003C/component>`\r\nhere is my json data \r\n```\r\n[\r\n {\r\n \"id\": \"1\",\r\n \"name\": \"Layout12\"\r\n },\r\n {\r\n \"id\": \"2\",\r\n \"name\": \"Layout12\"\r\n },\r\n {\r\n \"id\": \"3\",\r\n \"name\": \"Layout12\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"4\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"5\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"6\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"7\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"8\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"9\"\r\n },\r\n {\r\n \"name\": \"Layout12\",\r\n \"id\": \"10\"\r\n }\r\n]\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c495\">#c495\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2938],{"name":2924,"color":2925},568,"Server render error RangeError: Maximum call stack size exceeded","2023-01-18T15:39:31Z","https://github.com/nuxt/nuxt/issues/568",0.69906044,{"description":2945,"labels":2946,"number":2939,"owner":2872,"repository":2950,"state":2930,"title":2951,"updated_at":2952,"url":2953,"score":2943},"Using \r\n\r\n```ts\r\nmockNuxtImport(\"useHead\", () => {\r\n return () => {\r\n return { value: \"mocked head\" };\r\n };\r\n});\r\n\r\n```\r\n\r\nIn a spec results in the error\r\n\r\n`Error: Cannot find import \"useHead\" to mock`\r\n\r\nwhich led me to check the imports that are (as far as I understood) defined in the `vitest-environment-nuxt` package\r\n\r\nhttps://github.com/danielroe/nuxt-vitest/blob/57c55a259006b4c6543c97d593465d278af3c743/packages/vitest-environment-nuxt/src/modules/mock.ts#L39-L41\r\n\r\n\r\nin my example the imports look like this:\r\n\r\n```js\r\n[\r\n { name: 'useAsyncData', as: 'useAsyncData', from: '#app' },\r\n { name: 'useLazyAsyncData', as: 'useLazyAsyncData', from: '#app' },\r\n { name: 'useNuxtData', as: 'useNuxtData', from: '#app' },\r\n { name: 'useNuxtApp', as: 'useNuxtApp', from: '#app' },\r\n { name: 'useRuntimeConfig', as: 'useRuntimeConfig', from: '#app' },\r\n { name: 'useState', as: 'useState', from: '#app' },\r\n { name: 'useFetch', as: 'useFetch', from: '#app' },\r\n { name: 'useLazyFetch', as: 'useLazyFetch', from: '#app' },\r\n { name: 'useCookie', as: 'useCookie', from: '#app' },\r\n { name: 'useRequestHeaders', as: 'useRequestHeaders', from: '#app' },\r\n { name: 'useRequestEvent', as: 'useRequestEvent', from: '#app' },\r\n { name: 'useRequestFetch', as: 'useRequestFetch', from: '#app' },\r\n { name: 'useRouter', as: 'useRouter', from: '#app' },\r\n { name: 'useRoute', as: 'useRoute', from: '#app' },\r\n { name: 'useError', as: 'useError', from: '#app' },\r\n { name: 'useAppConfig', as: 'useAppConfig', from: '#app' }\r\n]\r\n```\r\n\r\n\r\nI'd expect `useHead` to be part of these imports in order to be able to mock it",[2947],{"name":2948,"color":2949},"vitest-environment","b60205","test-utils","useHead not part of imported composables","2023-12-02T00:22:10Z","https://github.com/nuxt/test-utils/issues/568",{"description":2955,"labels":2956,"number":2959,"owner":2872,"repository":2960,"state":2930,"title":2961,"updated_at":2962,"url":2963,"score":2964},"https://github.com/nuxt/nuxt.com/blob/main/composables/useModules.ts#L39",[2957],{"name":2910,"color":2958},"1ad6ff",1543,"nuxt.com","Modules pages : re-add the filter for official modules","2024-10-10T07:20:45Z","https://github.com/nuxt/nuxt.com/issues/1543",0.70680475,{"description":2966,"labels":2967,"number":2970,"owner":2872,"repository":2873,"state":2930,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### 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```",[2968,2969],{"name":2883,"color":2884},{"name":2886,"color":2887},2655,"Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.7077669,{"description":2976,"labels":2977,"number":2980,"owner":2872,"repository":2960,"state":2930,"title":2981,"updated_at":2982,"url":2983,"score":2984},"Hello, thanks for open-sourcing this repo. I'm exploring the app. \r\n\r\nI would like to understand why pathPrefix is not getting applied to components within the folder `~/components/content`? Is this a convention that's undocumented? Thanks. \r\n\r\n\r\n",[2978],{"name":2866,"color":2979},"ff1ab2",1418,"Understanding why pathPrefix not set for components/content ","2023-11-21T10:07:33Z","https://github.com/nuxt/nuxt.com/issues/1418",0.71105987,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fsN3llAMK5PWexRs7sk0pOlW-fYEVggj7qSTF1ixIGSM":-1},"/nuxt/ui/3140"]