\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```",[3170],{"name":3146,"color":3147},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.6728709,{"labels":3177,"number":3184,"owner":3152,"repository":3152,"state":3185,"title":3186,"updated_at":3187,"url":3188,"score":3189},[3178,3181],{"name":3179,"color":3180},"3.x","29bc7f",{"name":3182,"color":3183},"bug","d73a4a",12801,"closed","Auto imported component's style is loaded even if I don't use component","2023-01-19T17:38:51Z","https://github.com/nuxt/nuxt/issues/12801",0.6411417,{"description":3191,"labels":3192,"number":3204,"owner":3152,"repository":3152,"state":3185,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### 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_",[3193,3194,3195,3198,3201],{"name":3179,"color":3180},{"name":3182,"color":3183},{"name":3196,"color":3197},"vite","3574D1",{"name":3199,"color":3200},"🔨 p3-minor","FBCA04",{"name":3202,"color":3203},"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.6413198,{"description":3210,"labels":3211,"number":3219,"owner":3152,"repository":3152,"state":3185,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Version\n\n[v2.2.0](https://github.com/nuxt.js/releases/tag/v2.2.0)\n\n### Reproduction link\n\n[https://codesandbox.io/s/k3y402xpyv](https://codesandbox.io/s/k3y402xpyv)\n\n### Steps to reproduce\n\n# Bug:\n\n- visit `Other`\n- visit `Bug`\n\n# No Bug\n\nvisit `Bug` directly or if you came from `Other` to `Bug`, just refresh it.\n\n### What is expected ?\n\nFunctional component's style gets overridden by page's style.\n\n### What is actually happening?\n\nFunctional component's style being overridden by page's style if coming from different route\n\n### Additional comments?\n\nNot sure if this is nuxt issue or vue tbh\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/c8120\">#c8120\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3212,3215,3216],{"name":3213,"color":3214},"stale","ffffff",{"name":3146,"color":3147},{"name":3217,"color":3218},"2.x","d4c5f9",4309,"Page styles not overriding functional component styles when visited from different route","2023-01-22T15:30:07Z","https://github.com/nuxt/nuxt/issues/4309",0.65990645,{"description":3225,"labels":3226,"number":3233,"owner":3152,"repository":3152,"state":3185,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.10.0`\r\n- Nuxt Version: `3.11.0`\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/murisceman/nuxt-preloading-styles-issue\r\n\r\n### Describe the bug\r\n\r\nAfter updating to Nuxt `v3.11.0`, all styles imported from pages are automatically loaded throughout the app **(only in development mode)**.\r\n\r\nFor example, when importing a style into `pages/dashboard.vue`...\r\n\r\n```vue\r\n\u003Ctemplate>...\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport \"~/assets/dashboard.css\";\r\n\u003C/script>\r\n```\r\n\r\n...this style will be loaded for both `localhost:3000` and `localhost:3000/dashboard`.\r\n\r\n#### Prior versions\r\n\r\nNuxt `v3.10.x` loaded page-imported styles only when the page was visited. My [application](https://github.com/pruvious/pruvious), which dynamically re-registers dashboard routes, worked well in this scenario.\r\n\r\n### Additional context\r\n\r\nI have a stylesheet that is only applicable to the `/dashboard/**/*` routes, and it should not be loaded elsewhere. What methods can I use to achieve style isolation (in development mode) on a route level without using `scoped` styles? Thank you!\r\n\r\n### Logs\r\n\r\n_No response_",[3227,3230,3231,3232],{"name":3228,"color":3229},"dx","C39D69",{"name":3182,"color":3183},{"name":3196,"color":3197},{"name":3199,"color":3200},26312,"Nuxt `v3.11.0` is loading styles from all pages","2024-03-18T21:17:10Z","https://github.com/nuxt/nuxt/issues/26312",0.6617414,{"description":3239,"labels":3240,"number":3243,"owner":3152,"repository":3152,"state":3185,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\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: npm@10.1.0\r\n- Builder: -\r\n- User Config: devtools, experimental, modules, srcDir\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.10.4\r\n- Build Modules: -\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-rkhot3?file=README.md\n\n### Describe the bug\n\n### Component Setup: \r\n- **Component A**: This is a global server component (A.server.global.vue)\r\n- **Component B**: A regular component with specific scoped styling. (B.vue)\r\n\r\n### Behavior Observed:\r\n\r\n- In development mode (`nuxt dev`), everything works as expected. component B's styling is correctly applied when it is used inside component A.\r\n- In production mode (`npm run build && node .output/server/index.mjs`), the styling of component B is not applied when it is used inside component A.\r\n\r\nI provided a stackblitz reproduction link, but that starts directly in dev mode, and as I said above everything works in dev mode, the stackblitz needs to be started in production mode.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3241,3242],{"name":3179,"color":3180},{"name":3146,"color":3147},25330,"Styling of Regular Component Lost in Production When Nested Inside Global Server Component","2024-01-28T21:27:33Z","https://github.com/nuxt/nuxt/issues/25330",0.66262406,{"description":3249,"labels":3250,"number":3253,"owner":3152,"repository":3152,"state":3185,"title":3254,"updated_at":3255,"url":3256,"score":3257},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v18.19.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: devtools, ssr, features, build, modules, vite\r\n- Runtime Modules: ()\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-11vucf-dwcpwg?file=app.vue\n\n### Describe the bug\n\nHappens in production build , The text does not turn red\r\n\r\nIf the component is removed from pages/index.vue and placed outside the `NuxtLayout` component in `app.vue` and rebuilt, the inline style can be injected normally.\r\ntext turns red\r\n\r\n\n\n### Additional context\n\n\r\n\r\nNo styles are injected in the development environment (is this planned?)\n\n### Logs\n\n_No response_",[3251,3252],{"name":3146,"color":3147},{"name":3202,"color":3203},25991,"Component placed in nuxt component cannot inject inline styles","2024-09-17T13:29:57Z","https://github.com/nuxt/nuxt/issues/25991",0.6628451,{"description":3259,"labels":3260,"number":3267,"owner":3152,"repository":3152,"state":3185,"title":3268,"updated_at":3269,"url":3270,"score":3271},"### Describe the bug\r\nIn Nuxt 3.4.2, the NuxtWelcome component CSS is being included in the global entry.XX.css file even when it's not used. This didn't happen in 3.4.1\r\n\r\nExample:\r\nWhen you no longer use the NuxtWelcome component..\r\n\u003Cimg width=\"135\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2112282/233808114-75e37049-e504-471a-8d7c-794d0d15740b.png\">\r\n\r\nIt's CSS is still being included in the main entry.css file\r\n\u003Cimg width=\"1272\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2112282/233808141-b482bc5d-f7e5-462d-9a97-2fe95f47dcd8.png\">\r\n\r\n### Reproduction\r\nExample Repo\r\nhttps://github.com/hecktarzuli/nuxt-bug-20450-good-3-4-1\r\n\r\nBranch: Main = Nuxt v3.4.1\r\nhttps://nuxt-bug-20450-good-3-4-1.vercel.app/\r\n(Notice this has no CSS file at all)\r\n\r\nBranch: nuxt-3.4.2 = Nuxt v3.4.2\r\nhttps://nuxt-bug-20450-good-3-4-1-git-nuxt-3-4-2-josh-masteringnux.vercel.app/\r\n(Notice this does have a global entry.XX.css file, and it's filled with the NuxtWelcome styles.\r\n\r\nSTEPS:\r\nCreate a Nuxt 3.4.2 project and do not use the Welcome page.\r\nDo a build, preview\r\nNotice the entry.XX.css file still has the welcome page CSS in it.\r\n### Additional context\r\n\r\nThis didn't happen in the previous version (3.4.1)\r\nIf you have tailwind installed, the global entry.XX.css file would contain tailwind and the NuxtWelcome styles.\r\n\r\n### Environment\r\nnode 14.18.0\r\nnuxt 3.4.1/2\r\n",[3261,3262,3263,3264],{"name":3179,"color":3180},{"name":3182,"color":3183},{"name":3199,"color":3200},{"name":3265,"color":3266},"performance","E84B77",20450,"Entry.XX.css includes NuxtWelcome styles when it's not used","2023-04-28T09:14:45Z","https://github.com/nuxt/nuxt/issues/20450",0.6635157,["Reactive",3273],{},["Set"],["ShallowReactive",3276],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmEpvyLwuLausSTUiaIaCJo4nrC1qp8jAt3buieQw4hs":-1},"/nuxt/nuxt/13911"]