\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```",[3150],{"name":3135,"color":3136},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.64696467,{"description":3157,"labels":3158,"number":3174,"owner":3141,"repository":3141,"state":3175,"title":3176,"updated_at":3177,"url":3178,"score":3179},"### 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_",[3159,3162,3165,3168,3171],{"name":3160,"color":3161},"3.x","29bc7f",{"name":3163,"color":3164},"bug","d73a4a",{"name":3166,"color":3167},"vite","3574D1",{"name":3169,"color":3170},"🔨 p3-minor","FBCA04",{"name":3172,"color":3173},"inline styles","68AF97",25420,"closed","missing important inline styles from components used across multiple pages","2024-01-28T21:27:14Z","https://github.com/nuxt/nuxt/issues/25420",0.6190111,{"labels":3181,"number":3184,"owner":3141,"repository":3141,"state":3175,"title":3185,"updated_at":3186,"url":3187,"score":3188},[3182,3183],{"name":3160,"color":3161},{"name":3163,"color":3164},12669,"Invalid result of `Style` component","2023-01-19T16:09:47Z","https://github.com/nuxt/nuxt/issues/12669",0.63768965,{"description":3190,"labels":3191,"number":3199,"owner":3141,"repository":3141,"state":3175,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.19.1`\r\n- Nuxt Version: `3.3.2`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `pnpm@8.0.0`\r\n- Builder: `vite`\r\n- User Config: `components`, `extends`, `alias`, `modules`, `css`, `postcss`, `runtimeConfig`, `i18n`, `vite`\r\n- Runtime Modules: `@nuxt/devtools@0.3.1`, `@pinia/nuxt@^0.4.0`, `@nuxtjs/i18n@8.0.0-beta.10`, `@vueuse/nuxt@9.13.0`, `@vue-macros/nuxt@1.2.7`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\nCannot create correct repro, because i have 3 projects, 2 of them doesnt have inlined styles for any page. \n\n### Describe the bug\n\n\u003Cstyle> tag wasnt added to SSR output. Maybe here is any conditions or? \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3192,3193,3196],{"name":3160,"color":3161},{"name":3194,"color":3195},"upstream","E8A36D",{"name":3197,"color":3198},"upstream-bug","B60205",20104,"Inline styles not added for some pages","2023-06-14T20:12:04Z","https://github.com/nuxt/nuxt/issues/20104",0.64426875,{"labels":3205,"number":3208,"owner":3141,"repository":3141,"state":3175,"title":3209,"updated_at":3210,"url":3211,"score":3212},[3206,3207],{"name":3160,"color":3161},{"name":3135,"color":3136},13911,"Styles of unused components are being imported ","2023-01-19T17:09:15Z","https://github.com/nuxt/nuxt/issues/13911",0.64543444,{"description":3214,"labels":3215,"number":3217,"owner":3141,"repository":3141,"state":3175,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.10.0`\r\n- Nuxt Version: `3.12.3`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `pnpm@9.4.0`\r\n- Builder: `-`\r\n- User Config: `telemetry`, `compatibilityDate`, `runtimeConfig`, `modules`, `future`, `sourcemap`, `devtools`, `site`, `app`, `vite`, `nitro`, `css`, `postcss`, `eslint`, `image`, `content`, `colorMode`, `icon`, `plausible`, `ogImage`, `linkChecker`, `sitemap`\r\n- Runtime Modules: `@nuxt/content@2.13.0`, `@nuxt/devtools@1.3.9`, `@nuxt/eslint@0.3.13`, `@nuxt/fonts@0.7.1`, `@nuxt/icon@1.0.0`, `@nuxt/image@1.7.0`, `@nuxtjs/plausible@1.0.0`, `@nuxtjs/seo@2.0.0-rc.11`, `@eschricht/nuxt-color-mode@1.0.5`, `@unocss/nuxt@0.61.0`, `@vueuse/nuxt@10.11.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nThis is from nuxt.com\r\n\r\n\u003Cimg width=\"499\" alt=\"Screenshot 2024-07-04 at 17 00 47\" src=\"https://github.com/nuxt/nuxt/assets/2703233/f02eb091-a9ef-4549-b2ba-eda026508a33\">\r\n\r\n\u003Cimg width=\"973\" alt=\"Screenshot 2024-07-04 at 17 52 27\" src=\"https://github.com/nuxt/nuxt/assets/2703233/73e7e40a-4948-4d85-b9f0-89be1dc208d3\">\r\n\r\n### Describe the bug\r\n\r\nWith `nuxt@3.12.3` and\r\n\r\n```\r\nfuture: {\r\n compatibilityVersion: 4,\r\n}\r\n```\r\n\r\nit seems like `inlineStyles` should be enabled by default (I also tested with explicitly setting it in `future`), but I still get stylesheets linked on my landing page ([Promptmetheus](https://promptmetheus.com)) and Google Pagespeed complains about it.\r\n\r\n\u003Cimg width=\"502\" alt=\"Screenshot 2024-07-04 at 17 05 22\" src=\"https://github.com/nuxt/nuxt/assets/2703233/83278607-624a-476c-816d-16455f609bdd\">\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3216],{"name":3135,"color":3136},28029,"Is inlining styles not working?","2024-07-04T17:24:25Z","https://github.com/nuxt/nuxt/issues/28029",0.6461348,{"description":3223,"labels":3224,"number":3229,"owner":3141,"repository":3141,"state":3175,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v20.8.0\r\n- Nuxt Version: 3.10.1\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: app, debug, sourcemap, router, runtimeConfig, build, experimental, vite, typescript, css, modules, devtools, plugins, image, viewport, BASE_API_URL\r\n- Runtime Modules: @nuxt/image@1.3.0, @nuxtjs/partytown@1.4.0, @vueuse/nuxt@10.7.2, nuxt-jsonld@2.0.8, nuxt-viewport@2.1.4, sitis-nuxt-3/dist\r\n- Build Modules: -\r\n\r\n\r\n### Reproduction\r\n\r\n-\r\n\r\n### Describe the bug\r\n\r\nStylesheets are not included on the backend during production builds if the project uses layouts. If the contents of layouts are transferred to app.vue everything works as expected. The problem appeared since version 3.10\r\nThis is the content of app.vue\r\n\r\n\r\n\r\nThis is the content of layouts\r\n\r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3225,3226,3227],{"name":3160,"color":3161},{"name":3135,"color":3136},{"name":3228,"color":3170},"needs reproduction",25690,"Style sheets are not included on the server side during production builds","2024-02-14T10:49:14Z","https://github.com/nuxt/nuxt/issues/25690",0.64735055,{"description":3235,"labels":3236,"number":3239,"owner":3141,"repository":3141,"state":3175,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.16.0\r\n- Nuxt Version: 3.6.0\r\n- Nitro Version: 2.5.1\r\n- Package Manager: pnpm@8.6.2\r\n- Builder: vite\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nrepo: https://github.com/abdAbdaldeen/nuxt-3-inlineSSRStyles\n\n### Describe the bug\n\n### The current behavior:\r\nThe component style will be added as external CSS when it has been reused in more than one place even if `inlineSSRStyles: true,`\r\n\r\n\r\n\r\nplease note that:\r\n1. component-1 is the reused component\r\n2. component-2 is used only once\r\n\r\n### The expected behavior:\r\nall styles must be inline\r\n\r\nsame as NUXT 2 when you set `build.extractCSS = false`\r\nhttps://v2.nuxt.com/docs/configuration-glossary/configuration-build/#extractcss\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3237,3238],{"name":3160,"color":3161},{"name":3135,"color":3136},21762,"There is still external CSS when inlineSSRStyles is true","2023-06-25T21:10:05Z","https://github.com/nuxt/nuxt/issues/21762",0.65101635,{"description":3245,"labels":3246,"number":3249,"owner":3141,"repository":3141,"state":3175,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.7.0`\r\n- CLI Version: `3.7.3`\r\n- Nitro Version: `2.6.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `-`\r\n- User Config: `devtools`, `modules`, `pinia`, `imports`, `postcss`, `experimental`, `css`\r\n- Runtime Modules: `@pinia/nuxt@0.4.11`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nView on https://nuxt-3-layout-css.vercel.app/\r\n\r\nReproduction repo available at - https://github.com/gavin667/nuxt-3-layout-css\r\n\r\n### Describe the bug\r\n\r\n#### Steps to reproduce\r\n1. Load https://nuxt-3-layout-css.vercel.app/\r\n2. You may need to throttle your network connection to notice the colour swap.\r\n3. Notice the text for a component based in the layout flashes from black to blue?\r\n\r\n#### Expected behaviour\r\nThe text for a component based in the layout should not flash black to blue on initial page load.\r\n\r\nThe styles for components referenced in a layout file should be inlined correctly like other page styles when a lazy loaded component that also references the same store in the layout is used.\r\n\r\n#### Actual behavior\r\n\r\nIt seems to be that if I call a Pinia store in a layout file and reference a lazy loaded component that also references the same store it fails to inline the styles correctly on initial page load.\r\n\r\nCommenting out either references to the store fixes the issue.\r\n\r\nCheck [the repo I made](https://github.com/gavin667/nuxt-3-layout-css) but as a simplified version:\r\n\r\n```\r\n// layouts/default.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>This is text directly on the layout.\u003C/div>\r\n\r\n \u003C!-- CSS inside this is not inlined and leads to FOUC -->\r\n \u003CAnotherComponent/>\r\n\r\n \u003C!-- This component also references const exampleStore = useExampleStore() -->\r\n \u003CLazyTestComponent v-if=\"showLazyComponent\"/>\r\n\r\n \u003Cdiv>\r\n \u003Cslot />\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup>\r\n const exampleStore = useExampleStore()\r\n\u003C/script>\r\n```\r\n\r\n```\r\n// components/TestComponent.vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"test-component\">\r\n \u003Ch1>This should be red on load\u003C/h1>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n const exampleStore = useExampleStore()\r\n\u003C/script>\r\n\r\n\u003Cstyle lang=\"postcss\">\r\n .test-component {\r\n color: red;\r\n font-size: 1.2rem;\r\n }\r\n\u003C/style> \r\n```\r\n\r\n```\r\n// components/AnotherComponent.vue\r\n\u003Ctemplate>\r\n \u003Ch1 class=\"another-component\">\r\n This should be blue on load\r\n \u003C/h1>\r\n\u003C/template>\r\n\u003Cstyle lang=\"postcss\">\r\n // these styles are missing onload\r\n .another-component {\r\n color: blue;\r\n }\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\n### Additional context\r\n\r\nI opened an issue on vuejs/pinia [here](https://github.com/vuejs/pinia/issues/2399) but that was close pretty promptly and I was recommended to open an issue here.\r\n\r\nHappy to assist in any further debugging that might be needed.\r\n\r\nI realise in the basic example I have linked it isn't much of an issue as it is just a simple colour swap. However when there are more or bigger components referenced within a layout and this happens it causes a more significant issue.\r\n\r\nAppreciate any help (or fixes)!\r\n\r\n### Logs\r\n\r\n_No response_",[3247,3248],{"name":3160,"color":3161},{"name":3135,"color":3136},23016,"Nuxt 3 - Referencing a store in a layout and a lazy loaded component stop layout component's styles being inlined on load ","2023-09-05T20:33:30Z","https://github.com/nuxt/nuxt/issues/23016",0.65110403,["Reactive",3255],{},["Set"],["ShallowReactive",3258],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flQn7z4vH9KVD0O9BAmdYctCB2YauzWBLrg_6RsXPHSg":-1},"/nuxt/nuxt/25991"]