\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3158],{"name":3159,"color":3160},"pending triage","E99695",33041,"nuxt","open","Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.6869852,{"description":3169,"labels":3170,"number":251,"owner":3162,"repository":3171,"state":3163,"title":3172,"updated_at":3173,"url":3174,"score":3175},"Hey!\n\nBuilt an application with nuxt originally on my linux machine. I cloned the repo and started developing again on my Windows machine, but came to an issue:\nI load the Source Code Pro font through nuxt fonts with the google provider:\n```ts\nimport pkg from './package.json';\n\nexport default defineNuxtConfig({\n compatibilityDate: '2025-05-15',\n devtools: { enabled: false },\n srcDir: \"src\",\n css: [\n '~/assets/css/main.css',\n '~/assets/css/nerdfonts.css'\n ],\n modules: ['@vueuse/nuxt', '@pinia/nuxt', 'pinia-plugin-persistedstate/nuxt', '@nuxt/fonts'],\n fonts: {\n families: [\n { name: 'Source Code Pro', provider: 'google', subsets: ['latin'] },\n ]\n },\n runtimeConfig: {\n public: {\n version: pkg.version\n }\n }\n});\n```\n\nHowever, on windows, somehow, no errors pops up, just the font doesn't exist in the CSS, I can't use it:\nIt defaults to the default browser font when I only specify \"Source Code Pro\" as family to force it into trying to use it (see screenshots)\n\nAs I previously said: no errors in the console (browser) and terminal. \nThe nuxt-fonts-global.css file that is being loaded into my page is a sourceMap:\n```html\n\u003Cstyle type=\"text/css\" data-vite-dev-id=\"virtual:nuxt:D%3A%2FUtilisateurs%2FAdam%2FDocuments%2Fdev%2FTypeScript%2Fsites%2Fhome-clock%2F.nuxt%2Fnuxt-fonts-global.css\">\n/*# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoidmlydHVhbDpudXh0OkQlM0ElMkZVdGlsaXNhdGV1cnMlMkZBZGFtJTJGRG9jdW1lbnRzJTJGZGV2JTJGVHlwZVNjcmlwdCUyRnNpdGVzJTJGaG9tZS1jbG9jayUyRi5udXh0JTJGbnV4dC1mb250cy1nbG9iYWwuY3NzIiwibWFwcGluZ3MiOiIiLCJuYW1lcyI6W10sInNvdXJjZXMiOltdLCJ2ZXJzaW9uIjozfQ== */\u003C/style>\n```\nI have no idea if this is intended\nI don't know how it looks like on linux, as I haven't tested.\nTo clarify, I used an Arch Linux machine.\n\n\nHere are my versions on my current host:\nWindows 11\nNode 22.14.0\nYarn 1.22.22\nNuxt 3.17.4\nNuxt fonts 0.14.4\n\n\nAny ideas?\nHere is the repo if you want to try that for yourself: https://github.com/TheDogHusky/home-clock\n\n",[],"fonts","[BUG]: Font does not load in dev on Windows","2025-05-31T16:32:05Z","https://github.com/nuxt/fonts/issues/641",0.69519883,{"description":3177,"labels":3178,"number":3188,"owner":3162,"repository":3162,"state":3163,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0-rc.11`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-hkou23?file=app.vue,components%2FBlock.vue,main.ts,package.json\r\n\r\nRun Vite env: `npm run vite`\r\nRun Nuxt env: `npm run nuxt`\r\n\r\nApps runs same components, one with Vite, the other with Nuxt.\n\n### Describe the bug\n\nIt seems like when running Nuxt, order of precedence of CSS only gets respected in SSR, but at the moment the app mounts, every scoped CSS declaration will get overwritten by parent.\r\n\r\nThat results in a flash in styling (first page render showing same CSS as Vite envs, then it blinks to another state).\r\n\r\nI suspect this is coming from order of precedence of CSS that is respected in Vite env, but not in Nuxt.\r\n\r\nI am not sure it is a bug or some of the \"caveats\" of scoped CSS, I just noticed the difference while working with `\u003Cstyle>` and thought it would be safer to report.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3179,3182,3185],{"name":3180,"color":3181},"bug","d73a4a",{"name":3183,"color":3184},"vite","3574D1",{"name":3186,"color":3187},"🍰 p2-nice-to-have","0E8A16",15048,"Order of precedence of CSS different from vite-plugin-vue","2024-11-19T16:20:21Z","https://github.com/nuxt/nuxt/issues/15048",0.7025466,{"description":3194,"labels":3195,"number":3197,"owner":3162,"repository":3162,"state":3163,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.17.1\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: pnpm@8.5.1\r\n- Builder: vite\r\n- User Config: vite\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/github/xtoolkit/nuxt-cssModule-problem\r\n\r\n### Describe the bug\r\n\r\nWhen we customize `generateScopedName` css not load or wrong load. if change `generateScopedName` text color in `/` and `/alt/` route is default! but if not change in `/` is `red` and in `/alt` is `yellow`\r\n\r\n**For test you need disable javascript in browser**\r\n\r\n\r\n### Additional context\r\n\r\n#### When javascript disable:\r\n\r\n\r\n#### When javascript enable:\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[3196],{"name":3159,"color":3160},21338,"Wrong load css when customize `generateScopedName`","2024-06-30T11:08:41Z","https://github.com/nuxt/nuxt/issues/21338",0.7248466,{"description":3203,"labels":3204,"number":3213,"owner":3162,"repository":3162,"state":3214,"title":3215,"updated_at":3216,"url":3217,"score":3218},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `app`, `runtimeConfig`, `css`, `vite`, `experimental`, `modules`, `build`, `sanity`\r\n- Runtime Modules: `@nuxtjs/sanity@1.8.0`, `@pinia/nuxt@0.4.11`, `nuxt-graphql-client@0.2.29`, `@vueuse/nuxt@10.2.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nSee screenshots attached... feel as though they'll clear enough.\n\n### Describe the bug\n\nStyles order set within a template .vue file aren't reflected during a production build (SSG, for example)\r\n\r\n\r\n\r\n\r\nThese above screenshots show the code in the editor as well as what is outputted during local development but in the following screenshots, in production, `font-feature-settings: 'case' on;` is moved to the top.\r\n\r\n\r\n\r\n\r\nAny known reason why this would happen? And if I can resolve?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3205,3208,3209,3210],{"name":3206,"color":3207},"3.x","29bc7f",{"name":3180,"color":3181},{"name":3183,"color":3184},{"name":3211,"color":3212},"🔨 p3-minor","FBCA04",22932,"closed","Styles not always in correct order when in production (SSG)","2023-09-04T11:31:34Z","https://github.com/nuxt/nuxt/issues/22932",0.67129,{"description":3220,"labels":3221,"number":3229,"owner":3162,"repository":3162,"state":3214,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n**!!! It only appears in production mode. Run** `yarn build && yarn preview`\r\n\r\nhttps://codesandbox.io/p/devbox/affectionate-lederberg-vz2xsy\r\n\r\n### Describe the bug\r\nWhen a component is used across multiple pages, the styles associated with that component do not appear as inline styles. This issue arises because these components are likely candidates for quick loading. For instance, I have an icon component that appears on every page. From a performance perspective, it's crucial to load the styles from this component as soon as possible, similar to critical CSS. In a real application, there may be components responsible for establishing the page layout, and they should ideally be loaded as soon as possible.\r\n\r\nIn reproduction, you'll notice that the \"IconComponent\" turns red once the styles from the file are applied. This delay increases the First Contentful Paint (FCP). Those styles should be loaded as critical css (which worked that way in nuxt 2).\r\n\r\n\r\n\r\nHowever, if you delete the `test.vue` page, the styles from the \"IconComponent\" are added as inline CSS.\r\n\r\n\r\n\r\nIs this behavior expected? Is there a method to enforce inline styles for certain components?\r\n\r\nCould this issue be related to https://github.com/nuxt/nuxt/issues/22507 ?\r\n\r\n### Additional context\r\n\r\nEven when I add this component as suggested here https://github.com/nuxt/nuxt/issues/22507#issuecomment-1757833275\r\nThose styles are still not included as inline.\r\nhttps://codesandbox.io/p/devbox/gifted-noyce-j3rncx\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[3222,3223,3224,3225,3226],{"name":3206,"color":3207},{"name":3180,"color":3181},{"name":3183,"color":3184},{"name":3211,"color":3212},{"name":3227,"color":3228},"inline styles","68AF97",25420,"missing important inline styles from components used across multiple pages","2024-01-28T21:27:14Z","https://github.com/nuxt/nuxt/issues/25420",0.6904235,{"description":3235,"labels":3236,"number":3239,"owner":3162,"repository":3162,"state":3214,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\r\n\r\n```\r\nNuxt project info: \r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: css, devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\n[Nuxt 3 repo](https://stackblitz.com/edit/github-qbfhyv) vs [Nuxt 2 repo](https://stackblitz.com/edit/github-4yydwm)\r\n\r\nBoth projects implement an identical structure (layout with header and index page)\r\n\r\nIn each of the reproductions, run the necessary commands to run the project in production mode\r\n- nuxt 3 - `npm run build && npm run preview`\r\n- nuxt 2 - `npm run build && npm run start`\r\n\r\nInspect the HTML code returned by accessing the index page. Notice the `\u003Cstyle>` tag in the `\u003Chead>`\r\n\r\n### Describe the bug\r\n\r\nThe way Nuxt 3 builds and extracts the CSS from the app is inconsistent with Nuxt 2. This can cause complications when migrating an existing Nuxt 2 app.\r\n\r\nIn Nuxt 3, the global styles specified from the nuxt config are injected at the end of the style tag. With Nuxt 2, these were injected at the beginning.\r\n\r\nIn both reproduction repositories, the `@/assets/styles/global.css` file is provided globally. If you inspect the result of the HTML pages (build for production), the contents of that CSS file are placed differently.\r\n\r\n**Follow-up observation** - this might be unrelated, but you will also notice that in the case of Nuxt 3, it is including the styles for both `components/dynamic/One.vue` and `components/dynamic/Two.vue` even though only at render time only `\u003Cdynamic-one />` is rendered. Nuxt 2 correctly only includes the styles from `One.vue`.\r\n\r\nIf unrelated (and is considered to be an issue) i am happy to open a separate report.\r\n\r\n### Additional context\r\n\r\nWe are in the process of migrating our Nuxt 2 app to Nuxt 3 and are running into multiple complications - this is one of them.\r\n\r\nIn the case of developing an app from scratch this would not be an issue because it would inform the development style.\r\n\r\nHowever, in our case some of the global styles get overridden by rules at the component level. The new order in Nuxt 3 causes this to break.\r\n\r\n### Logs\r\n\r\n_No response_",[3237,3238],{"name":3206,"color":3207},{"name":3159,"color":3160},25393,"Discrepancies in production build styles order (compared to nuxt 2)","2024-01-26T20:16:35Z","https://github.com/nuxt/nuxt/issues/25393",0.69485134,{"description":3245,"labels":3246,"number":3251,"owner":3162,"repository":3162,"state":3214,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.4.3\r\n- Nitro Version: 2.3.3\r\n- Package Manager: npm@9.6.5\r\n- Builder: vite\r\n- User Config: srcDir, ssr, modules, dir\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nMinimal repro: https://stackblitz.com/edit/nuxt-starter-ycw6ts\n\n### Describe the bug\n\nThe output order between \u003Clink rel=\"stylesheet\"> in template and \u003Cstyle> in component is different between SSR=true and SSR=false. \r\n\r\nFor example the following App.vue: \r\n```\r\n\u003Ctemplate>\r\n...\r\n\u003CHead>\r\n\u003CLink id=\"theme-link\" rel=\"stylesheet\" href=\"/public.css\" /> NOTE: the reason I use Link here is that later in the code I can use id to dynamically change this public.css's location. \r\n...\r\n\u003C/template>\r\n\u003Cstyle src=\"@/assets/override.scss\" />\r\n```\r\nMy expectation would be override.scss content has to happen after public.css since override.scss could be overriding stuff from public.css. I have noticed that when SSR=true, the order is expected. But when I set SSR=false, the override.scss content actually is before public.css. \r\n\r\nMinimal Repro Link is here: https://stackblitz.com/edit/nuxt-starter-ycw6ts (button is blue when SSR=true, but is red when SSR=false)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3247,3248,3249,3250],{"name":3206,"color":3207},{"name":3180,"color":3181},{"name":3183,"color":3184},{"name":3211,"color":3212},20662,"CSS Loading Order Inconsistent (SSR vs no SSR)","2024-03-11T18:15:45Z","https://github.com/nuxt/nuxt/issues/20662",0.70187944,{"description":3257,"labels":3258,"number":3265,"owner":3162,"repository":3266,"state":3214,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### Description\n\nHow can I listen to an event, when a link in the UNavigationMenu is clicked?\n\nI want to close the sidebar, that the navigationmenu is inside....\n\nI can see that there is a select event in the NavigationMenuLink component\n\n",[3259,3262],{"name":3260,"color":3261},"question","d876e3",{"name":3263,"color":3264},"v3","49DCB8",3216,"ui","UNavigationMenu: Listen to select event","2025-02-05T13:23:51Z","https://github.com/nuxt/ui/issues/3216",0.7037517,{"description":3272,"labels":3273,"number":3275,"owner":3162,"repository":3266,"state":3214,"title":3276,"updated_at":3277,"url":3278,"score":3279},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.15.1`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.15.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`\n- Runtime Modules: `@nuxt/ui@2.20.0`\n- Build Modules: `-`\n\n### Version\n\n2.20.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jxcmyybr?file=app.vue\n\n### Description\n\nAfter looping though all items in useAppConfig().ui.colors, i get a false-positive error after assigning the item to a UBadge's color property, the color is still applied.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nType 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)\nBadge.vue.d.ts(217, 5): The expected type comes from property 'color' which is declared here on type 'Partial\u003C{ size: BadgeSize; class: any; ui: { base?: string | undefined; rounded?: string | undefined; font?: string | undefined; size?: DeepPartial\u003C{ xs: string; sm: string; md: string; lg: string; }, any> | undefined; ... 4 more ...; default?: DeepPartial\u003C...> | undefined; } & { ...; } & { ...; }; ... 7 more ...; t...'\n(property) color?: BadgeColor | undefined\n```",[3274],{"name":3180,"color":3181},3077,"Type 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)","2025-01-13T16:33:02Z","https://github.com/nuxt/ui/issues/3077",0.70546514,["Reactive",3281],{},["Set"],["ShallowReactive",3284],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXGRdozzRhM08lnt9KPgzVWC5hj6Gio8BuxCjH6aid9Q":-1},"/nuxt/ui/2150"]