\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_",[2001,2004,2005],{"name":2002,"color":2003},"enhancement","a2eeef",{"name":1988,"color":1989},{"name":2006,"color":2007},"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.78754514,{"description":2014,"labels":2015,"number":2023,"owner":1991,"repository":1992,"state":1993,"title":2024,"updated_at":2025,"url":2026,"score":2027},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.12.0\n- Nuxt Version: - (using vue@latest)\n- CLI Version: 3.15.0\n- Nitro Version: -\n- Package Manager: pnpm@9.0.4\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\nhttps://github.com/zugende/nuxt-ui-type-error-repro\n\n### Description\n\nWhen creating a fresh standalone Vue app using `pnpm create vue@latest` and then installing nuxt/ui by following the instructions here: https://ui3.nuxt.dev/getting-started/installation/vue one get type errors during the build process running `pnpm build`.\n\n👀 Update 15. Nov: Workaround is to disable type-check in your build command\n``` bash\n❌ \"build\": \"run-p type-check \\\"build-only {@}\\\" --\",\n✅ \"build-only\": \"vite build\",\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n// more than 160 errors (shortened)\n\nnode_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_embla-carousel@8.3.1_rollup@4.24.4_typescript@5.6_yljlai3w6pxxgcxew5prmihdom/node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue:5:24 - error TS2307: Cannot find module '#build/app.config' or its corresponding type declarations.\n\n5 import _appConfig from '#build/app.config'\n ~~~~~~~~~~~~~~~~~~~\n\nnode_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_embla-carousel@8.3.1_rollup@4.24.4_typescript@5.6_yljlai3w6pxxgcxew5prmihdom/node_modules/@nuxt/ui/dist/runtime/components/Textarea.vue:4:24 - error TS2307: Cannot find module '#build/app.config' or its corresponding type declarations.\n\n4 import _appConfig from '#build/app.config'\n ~~~~~~~~~~~~~~~~~~~\n\n[.....]\n\nFound 165 errors.",[2016,2019,2020],{"name":2017,"color":2018},"bug","d73a4a",{"name":1988,"color":1989},{"name":2021,"color":2022},"vue","42b883",2560,"Vue Vite plugin is causing type errors","2025-03-17T11:12:19Z","https://github.com/nuxt/ui/issues/2560",0.7877907,{"description":2029,"labels":2030,"number":2034,"owner":1991,"repository":2035,"state":1993,"title":2036,"updated_at":2037,"url":2038,"score":2039},"Hey 👋 \r\n\r\nI think we could lazy-load quite some components that appear below the fold, e.g. everything on the landing page below the logos (https://github.com/nuxt/nuxt.com/blob/v2/pages/index.vue#L64-L115). This might also apply to other pages.",[2031],{"name":2032,"color":2033},"performance","5E19B6",1370,"nuxt.com","Lazy-loading for below-the-fold components","2023-10-18T13:26:47Z","https://github.com/nuxt/nuxt.com/issues/1370",0.7938679,{"description":2041,"labels":2042,"number":2043,"owner":1991,"repository":2035,"state":2044,"title":2045,"updated_at":2046,"url":2047,"score":2048},"We would like to explore with Alex the possibility of having a form `nuxt.com/jobs/new` like Tailwind: https://jobs.tailwindcss.com/post-a-job\n\nOn the API side, we can use whatever database we want to store the informations or use `api.nuxt.com`, would love your input on this @benjamincanac \n\nRight now we use vuejobs.com but we are not making any money from it.",[],855,"closed","Post a Job form","2022-11-17T11:43:25Z","https://github.com/nuxt/nuxt.com/issues/855",0.7143117,{"labels":2050,"number":2055,"owner":1991,"repository":1991,"state":2044,"title":2056,"updated_at":2057,"url":2058,"score":2059},[2051,2054],{"name":2052,"color":2053},"3.x","29bc7f",{"name":2017,"color":2018},11874,"useMeta calls `onBeforeUnmount` outside of component instance","2023-01-19T15:53:16Z","https://github.com/nuxt/nuxt/issues/11874",0.74223375,{"description":2061,"labels":2062,"number":2066,"owner":1991,"repository":1991,"state":2044,"title":2067,"updated_at":2068,"url":2069,"score":2070},"How to insert the \"window.beforeunload\" or any other way to execute something before closing the browser or reloading it?\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/c6914\">#c6914\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2063],{"name":2064,"color":2065},"2.x","d4c5f9",3229,"Before Unload","2023-01-18T16:10:08Z","https://github.com/nuxt/nuxt/issues/3229",0.7599584,{"description":2072,"labels":2073,"number":2076,"owner":1991,"repository":1992,"state":2044,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### 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.",[2074,2075],{"name":1985,"color":1986},{"name":1988,"color":1989},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.7626003,{"description":2082,"labels":2083,"number":2086,"owner":1991,"repository":1992,"state":2044,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Description\n\nHi,\n\nhere in the first form in nuxtui2\nhttps://ui.nuxt.com/components/form \nthe behaviour is that the input field is validated after the blur. If there is an error and I correct it, the error is fixed immediately.\n\nIn v3 the behaviour is different. I have seen the prop validateOn so I can change it to blur, but not like first onBlur and then onInput like in v2.\n\nbest,\ngregor",[2084,2085],{"name":2017,"color":2018},{"name":1988,"color":1989},3006,"How can I get the same form validation behaviour as in v2?","2025-01-06T17:48:11Z","https://github.com/nuxt/ui/issues/3006",0.7649645,{"description":2092,"labels":2093,"number":2098,"owner":1991,"repository":1991,"state":2044,"title":2099,"updated_at":2100,"url":2101,"score":2102},"### Describe the feature\n\n```ts\r\nexport default function usePWAState () {\r\n const c = new AbortController()\r\n const state = reactive({\r\n mode: 'browser'\r\n })\r\n\r\n state.mode = ['fullscreen', 'standalone', 'minimal-ui'].find(displayMode => process.client && window.matchMedia(`(display-mode: ${displayMode})`).matches) ?? 'browser'\r\n\r\n onMounted(() => {\r\n if (process.client) {\r\n for (const displayMode of ['fullscreen', 'standalone', 'minimal-ui']) {\r\n window.matchMedia(`(display-mode: ${displayMode})`).addEventListener('change', (e) => {\r\n state.mode = e.matches ? displayMode : 'browser'\r\n }, { signal: c.signal })\r\n }\r\n }\r\n })\r\n\r\n onUnmounted(() => {\r\n c.abort()\r\n })\r\n\r\n return computed(() => state)\r\n}\r\n\r\n```\r\n\r\nPlease, analyze that code in order to improve code of this PWA package at least for nuxt3. As you can see, this code sets state mode of pwa. By 'mode' I mean the place where is opened app. This is very important code as it is not static (as it is now). So whenever user switch from browser to app or vide-versa, my app will always see this by watch `state.mode` ref. \n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2094,2095],{"name":2052,"color":2053},{"name":2096,"color":2097},"pending triage","E99695",22448,"Bug fix: $pwa.isInstalled ref update for nuxt3. (it does not work now, but i have solution)","2023-08-02T21:46:14Z","https://github.com/nuxt/nuxt/issues/22448",0.7723192,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"eu2L5kTPveDaVlegIY8SlbyFmgyRrfJcTssvLYhoSY0":-1},"/nuxt/test-utils/827"]