\n\n### Logs\n\n```shell-script\n\n```",[3174,3175,3176],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4716,"Tabs: Failed to resolve component: UBadge","2025-08-12T08:31:38Z","https://github.com/nuxt/ui/issues/4716",0.7344243,{"description":3183,"labels":3184,"number":3194,"owner":3149,"repository":3150,"state":3166,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Description\n\nI am not sure what I am missing, I have added a UBadge into a UDashboardCard but the color/design is wrong:\n\n```html\n \u003CUDashboardCard\n v-if=\"hasDealLinked\"\n title=\"Linked Deal\"\n >\n\n \u003CUBadge\n color=\"red\"\n variant=\"subtle\"\n size=\"xs\"\n >\n {{ linkedItems?.deal.name }}\n \u003C/UBadge>\n \u003C/UDashboardCard>\n```\n\n\nnuxt.config.ts\n```Typescript\n ui: {\n global: true,\n safelistColors: ['red'],\n theme: {\n colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'reverse', 'red']\n }\n },\n```\n\nRender is not a subtle one and border color is never red:\n\n\n\nMany thanks for the help\n",[3185,3188,3191],{"name":3186,"color":3187},"question","d876e3",{"name":3189,"color":3190},"needs reproduction","CB47CF",{"name":3192,"color":3193},"closed-by-bot","ededed",3378,"UBadge Color and variant","2025-05-18T02:13:28Z","https://github.com/nuxt/ui/issues/3378",0.73986,{"description":3200,"labels":3201,"number":3208,"owner":3149,"repository":3149,"state":3166,"title":3209,"updated_at":3210,"url":3211,"score":3212},"Hi. Today [vuejs/pwa](https://github.com/vuejs/pwa) repo is public. Their build steps are including: \r\n\r\n- CSS across all components extracted into a single file and minified with **[cssnano](http://cssnano.co)**.\r\n- All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.\r\n\r\nAlso @addyosmani stated on vuejs/pwa#1 checklist. (He seems not talking about critical path css and only for global stylesheets)\r\n\r\n> CSS extraction for production\r\n\r\n# Benchmarks (only css analysis)\r\nI started a lighthouse benchmark on a local nuxt 0.10.5 generated version to avoid network latency and server render times. with bootstrap css + some global styles. (serving with a docker nginx webserver)\r\n\r\n### Using default nuxt config\r\n(Lighthouse)\r\n\r\n\r\n\r\n### [WIP]\r\nTrying to build on nuxt using same stack used in vue/pwa configurations. [webpack.prod.conf.js](https://github.com/vuejs/pwa/blob/prototype/template/build/webpack.prod.conf.js)\r\n\r\n- [ ] Using cssnano\r\n- [ ] Adding back css generation using extract-text-webpack-plugin\r\n- [ ] [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)\r\n- [ ] Check performance of SSR (req/second) with both approaches.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c418\">#c418\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3202,3205],{"name":3203,"color":3204},"enhancement","8DEF37",{"name":3206,"color":3207},"2.x","d4c5f9",478,"[wip] CSS & PWA benchmarks","2023-01-18T22:17:23Z","https://github.com/nuxt/nuxt/issues/478",0.7418396,{"description":3214,"labels":3215,"number":3227,"owner":3149,"repository":3149,"state":3166,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\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.2.3\r\n- Builder: -\r\n- User Config: app, devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[3.11 repro](https://stackblitz.com/edit/github-mrq86l-sgzphx?file=assets%2Fcss%2Fmain.css)\r\n\r\nCompare with Nuxt 3.10: [working repro](https://stackblitz.com/edit/github-mrq86l-tnuvd6?file=assets%2Fcss%2Fmain.css)\n\n### Describe the bug\n\nPreviously on 3.10, CSS files listed in the Nuxt config `css` property that have `url('/...')` in them would have those URLs automatically prefixed in the build step if `app.cdnURL` is set. The output `entry-styles.[hash].mjs` contained a line like this:\r\n\r\n```js\r\nconst main = \"@font-face{font-family:Poppins;font-style:normal;font-weight:400;src:url(\" + publicAssetsURL(\"pxiEyp8kv8JHgFVrJJfecg.woff2\") + \")}*{font-family:Poppins}\";\r\n```\r\n\r\nOn 3.11, this step is skipped:\r\n\r\n```js\r\nconst main = \"@font-face{font-family:Poppins;font-style:normal;font-weight:400;src:url(/pxiEyp8kv8JHgFVrJJfecg.woff2)}*{font-family:Poppins}\";\r\n```\r\n\r\nThe result is that our app doesn't find these files. It's possible that I should be using a different pattern, but I do know that 3.11 came with [changes to public asset handling](https://nuxt.com/blog/v3-11#public-assets-handling) so I'm not sure if it's me or if it's related to that change.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3216,3217,3218,3221,3224],{"name":3160,"color":3161},{"name":3140,"color":3141},{"name":3219,"color":3220},"vite","3574D1",{"name":3222,"color":3223},"🔨 p3-minor","FBCA04",{"name":3225,"color":3226},"inline styles","68AF97",26895,"app.cdnURL not applied to URLs in global CSS files","2024-05-23T14:34:07Z","https://github.com/nuxt/nuxt/issues/26895",0.7443786,{"description":3233,"labels":3234,"number":3239,"owner":3149,"repository":3149,"state":3166,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n❯ npx nuxi info\r\n[15:27:51] Working directory: /home/projects/aonikwpkw.github\r\n[15:27:51] Nuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n[15:27:51] 👉 Report an issue: https://github.com/nuxt/nuxt/issues/new\r\n\r\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\r\n\r\n👉 Read documentation: https://nuxt.com\n\n### Reproduction\n\nCreate file app.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtPage />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nCreate file pages/home.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CMy>\u003C/My> \r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport My from '../my.vue'\r\n\u003C/script>\r\n```\r\n\r\nCreate file my.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Csection class=\"my\">\r\n my\r\n \u003C/section>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\n console.log('my')\r\n\u003C/script>\r\n\u003Cstyle>\r\n.my {\r\n display: flex;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n\r\nyarn build\r\nyarn start\n\n### Describe the bug\n\nwith lang=\"ts\" - no style tag\r\n\u003Cimg width=\"1721\" alt=\"Снимок экрана 2024-03-27 в 15 47 43\" src=\"https://github.com/nuxt/nuxt/assets/40139618/60eebed4-9576-4d03-b3fc-c3196bf90eb0\">\r\n\r\nwithout lang=\"ts\" - has style tag\r\n\u003Cimg width=\"1723\" alt=\"Снимок экрана 2024-03-27 в 15 50 04\" src=\"https://github.com/nuxt/nuxt/assets/40139618/16fb3c1f-f155-43d0-b988-e4ffe0d4ebdf\">\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3235,3236,3237,3238],{"name":3160,"color":3161},{"name":3140,"color":3141},{"name":3222,"color":3223},{"name":3225,"color":3226},26514,"inlineStyles don't work! script lang=\"ts\"","2024-04-24T10:43:07Z","https://github.com/nuxt/nuxt/issues/26514",0.7465135,{"description":3245,"labels":3246,"number":3249,"owner":3149,"repository":3149,"state":3166,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Environment\n\n- **Operating System:** Windows 10\r\n- **Browser/Device:** Google Chrome 98\r\n- **Theme/Mode:** Light mode\r\n- **Additional Information:** No browser extensions are enabled, and default browser settings are used.\n\n### Reproduction\n\n1. Enable light mode in the application.\r\n2. Navigate to the section where the URL \"https://nuxt.com/deploy/koyeb\" is displayed.\r\n3. Observe that the URL is not visible or barely visible due to insufficient contrast with the background.\r\n4. Switch to dark mode and verify that the URL becomes visible and legible.\r\n5. Switch back to light mode and confirm that the URL remains difficult to read.\n\n### Describe the bug\n\n# 🚀 Bug Report\r\n\r\n### 📝 Description\r\n\r\nIn light mode, the URL \"https://nuxt.com/deploy/koyeb\" is not visible, whereas in dark mode, the icon is visible. This inconsistency affects the readability and accessibility of the content.\r\n\r\n### ✨ Describe the solution you'd like\r\n\r\nAdjust the background color or text color of the URL \"https://nuxt.com/deploy/koyeb\" in light mode to ensure it is visible and legible to users.\r\n\r\n### ✍️ Describe alternatives you've considered\r\n\r\nOne alternative solution could be to provide a contrasting background color or to change the text color of the URL to ensure visibility in both light and dark modes. Additionally, providing an underline or a hover effect on the URL could improve its discoverability for users.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3247,3248],{"name":3160,"color":3161},{"name":3163,"color":3164},27234,"Inconsistency in Visibility of URL 'https://nuxt.com/deploy/koyeb' in Light and Dark Modes","2024-05-15T16:18:02Z","https://github.com/nuxt/nuxt/issues/27234",0.74662775,{"description":3255,"labels":3256,"number":3259,"owner":3149,"repository":3149,"state":3166,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify](https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify)\n\n### Steps to reproduce\n\nI cloned the whole Nuxt repo at: https://github.com/nuxt/nuxt.js\n\nThen navigated to: `nuxt.js/examples/with-vuetify`\n\nThen installed dependencies with `yarn install` and ran the server with `yarn dev`.\n\nThen opened `http://localhost:3000` and saw that no colors are being presented. It's all black and white.\n\nIf I have something like `\u003Cv-btn color=\"primary\">Something\u003C/v-btn>` the text is not visible as it is colored white.\n\n### What is expected ?\n\n\n\n\n### What is actually happening?\n\n\n\n\n### Additional comments?\n\nI'm on Linux Manjaro.\nNode 10.9.0.\nit's the same with Nuxt 1.4.2 or nuxt-edge.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7607\">#c7607\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3257,3258],{"name":3163,"color":3164},{"name":3206,"color":3207},3777,"Vuetify theme colors are not rendered properly","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3777",0.74879926,{"labels":3265,"number":3274,"owner":3149,"repository":3149,"state":3166,"title":3275,"updated_at":3276,"url":3277,"score":3278},[3266,3267,3268,3271],{"name":3160,"color":3161},{"name":3140,"color":3141},{"name":3269,"color":3270},"nitro","bfd4f2",{"name":3272,"color":3273},"❗ p4-important","D93F0B",13095,"renderStyles does not render styles for app.vue dependencies","2023-01-19T16:52:49Z","https://github.com/nuxt/nuxt/issues/13095",0.7500226,["Reactive",3280],{},["Set"],["ShallowReactive",3283],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhrzQXmIgTz80_edQYpM1Np8Nz3YiuRDCPkQzdaKTz7A":-1},"/nuxt/ui/1284"]