\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_",[2981,2982],{"name":2952,"color":2953},{"name":2971,"color":2972},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.63199776,{"description":2989,"labels":2990,"number":2998,"owner":2942,"repository":2942,"state":2961,"title":2999,"updated_at":3000,"url":3001,"score":3002},"### Environment\r\n\r\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: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-kz3fe2?file=components%2FMyComponent.vue\r\n\r\n### Describe the bug\r\n\r\nWhen using scoped CSS (might also be without scoped, haven't tried), there's a problem after building:\r\n1. The CSS for the component gets added _inline_ **and** as a `\u003Clink>`\r\n2. All the CSS files are declared before the JS files, instead of after (in Nuxt 2 JS files came first, so the browser can start loading them async).\r\n\r\n#2 is not a direct problem, because browsers don't wait for the CSS to load in order to start loading JS, but since the JS is preloaded, it might still be better to hoist them above CSS?\r\n\r\n### Additional context\r\n\r\nWe discovered this while profiling our project in production and saw some odd results from Lighthouse, complaining about render blocking CSS.\r\n\r\nWe then noticed that almost all of the CSS was loaded twice (once inline, and once through `\u003Clink>`s).\r\nThe order was also reversed from Nuxt 2, even though that might not be so much of a bug.\r\n\r\nComparing the Lighthouse feedback from Nuxt 2 to Nuxt 3 (in our prod app), a few things are striking:\r\n- In Nuxt3: **all** the stylesheets are marked as \"A late network request adjusted the page layout\", whereas in Nuxt 2 this doesn't happen.\r\n- **None** of the css files are marked as preload in Nuxt 3, whereas they are in Nuxt 2\r\n\r\n### Logs\r\n\r\n_No response_",[2991,2992,2994,2997],{"name":2952,"color":2953},{"name":2993,"color":2937},"needs reproduction",{"name":2995,"color":2996},"closed-by-bot","ededed",{"name":2939,"color":2940},27053,"Styles get added both inline and by reference and precede JS files","2024-06-01T01:51:52Z","https://github.com/nuxt/nuxt/issues/27053",0.63461393,{"description":3004,"labels":3005,"number":3009,"owner":2942,"repository":2942,"state":2961,"title":3010,"updated_at":3011,"url":3012,"score":3013},"# **Problem** \r\nUsing `\u003Cstyle module>` in Vue single-page component to implement CSS Modules, duplicate style declarations are being injected into `\u003Chead>` but only when accessing the page directly. When accessed via router (i.e. from another page via a `\u003Cnuxt-link>`), the behaviour seems to be as expected. The number of times it's injected corresponds to the number of components in which one of its classes are 'composed'. \r\n\r\n\r\n## **Page accessed directly** \r\n\r\n\r\n\r\n\r\n## **Page accessed via `\u003Cnuxt-link>`** \r\n\r\n\r\n\r\n\r\n## **Example component (ui-a.vue)** \r\n```html\r\n\u003Ctemplate>\r\n \u003Csection :class=\"$style.root\">\u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {}\r\n\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\" module>\r\n\r\n/* Dependencies\r\n========================================================================== */\r\n@value c-background-color \"sass-loader!~/assets/styles/cosmetics/cosmetics.background-color.scss\"; \r\n\r\n\r\n/* Root class\r\n========================================================================== */\r\n.root {\r\n composes: purple from c-background-color;\r\n padding: 20px;\r\n}\r\n\r\n\u003C/style>\r\n``` \r\n\r\n\r\n## **Build.extend modifications** \r\n```javascript\r\nbuild: {\r\n extend (config, ctx) {\r\n const vueLoader = config.module.rules.find(({loader}) => loader === 'vue-loader')\r\n vueLoader.options.cssModules = {\r\n localIdentName: '[name]__[local]'\r\n }\r\n ...\r\n }\r\n ...\r\n}\r\n``` \r\n\r\n\r\n## **Expected** \r\nI'm a noob with absolutely all of this stuff (CSS Modules and SSR in particular), but I'd expect it to behave as it does in the second screenshot. No matter how many classes `compose` `.class-X`, `class-X`'s stylesheet should only be injected once.\r\n\r\n\r\n## **Additional Info** \r\nI've tried to keep the demo repo as minimal as I can. I've also published the static site to gh-pages:\r\nREPO: https://github.com/thisguyscode/nuxt-styleguide/tree/demo\r\nSTATIC: https://thisguyscode.github.io/nuxt-styleguide/ \r\n\r\nReally I'm new to all of this - just a designer trying to play with all you smart peoples' shiny new toys. If anyone has even a little insight it would be a great help. I've looked through issues on other related repos, and the only promising one was https://github.com/css-modules/css-modules/issues/180, but that turned out not to help. \r\n\r\nP.S. MAD love for the Nuxt team on all their hard work. Even a dunce like me was able to throw together a [portfolio site that doesn't suck with Nuxt](https://tinyworld.xyz). Complete overkill for the purpose of course but a lot of learning and fun was involved so thanks Nuxt!!! \r\n\r\n\r\n\r\n\r\n\r\n\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/c1900\">#c1900\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3006],{"name":3007,"color":3008},"2.x","d4c5f9",2143,"CSS Modules: Redudant styles injected to \u003Chead> when accessing page directly","2023-01-18T15:43:10Z","https://github.com/nuxt/nuxt/issues/2143",0.6420796,{"description":3015,"labels":3016,"number":3023,"owner":2942,"repository":2942,"state":2961,"title":3024,"updated_at":3025,"url":3026,"score":3027},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: ssr, compatibilityDate, devtools, future\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\n[https://stackblitz.com/edit/github-jy8gbysy](https://stackblitz.com/edit/github-jy8gbysy)\n\n### Describe the bug\n\nThe CSS that is included in the SFC component is not loaded when the component is a Lazy Hydrated component that has not yet been hydrated.\n\n### Additional context\n\nThis only occurs in production mode, not in dev mode!\n\n### Logs\n\n```shell-script\n\n```",[3017,3020,3021,3022],{"name":3018,"color":3019},"good first issue","fbca04",{"name":2933,"color":2934},{"name":2936,"color":2937},{"name":2939,"color":2940},31385,"CSS is not loaded for LazyHydrated components","2025-04-04T19:04:53Z","https://github.com/nuxt/nuxt/issues/31385",0.6426196,{"description":3029,"labels":3030,"number":3037,"owner":2942,"repository":2942,"state":2961,"title":3038,"updated_at":3039,"url":3040,"score":3041},"### 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",[3031,3032,3033,3034],{"name":2952,"color":2953},{"name":2933,"color":2934},{"name":2936,"color":2937},{"name":3035,"color":3036},"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.64472157,{"description":3043,"labels":3044,"number":3047,"owner":2942,"repository":2942,"state":2961,"title":3048,"updated_at":3049,"url":3050,"score":3051},"### 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_",[3045,3046],{"name":2952,"color":2953},{"name":2971,"color":2972},21762,"There is still external CSS when inlineSSRStyles is true","2023-06-25T21:10:05Z","https://github.com/nuxt/nuxt/issues/21762",0.6469892,{"description":3053,"labels":3054,"number":3063,"owner":2942,"repository":2942,"state":2961,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### Environment\r\n\r\n```\r\n[1:52:12 PM] Nuxi 3.6.5\r\n[1:52:12 PM] \r\n[1:52:12 PM] RootDir: /home/freek/projects/the-july-frontend\r\n[1:52:12 PM] Nuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.1\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.9\r\n- Builder: vite\r\n- User Config: extends, telemetry, ssr, fontMetrics, nitro, routeRules, runtimeConfig, build, modules, image, components, bugsnag, devtools, i18n, pwa, app, dnGraphqlClient, vite, plugins\r\n- Runtime Modules: @nuxtjs/fontaine@0.4.1, @pinia/nuxt@0.4.11, @nuxt/devtools@0.7.2, @vite-pwa/nuxt@0.1.0, nuxt-bugsnag@6.5.2, @digitalnatives/css-variables/nuxt@5.1.2, @digitalnatives/graphql-client@4.0.0, @nuxtjs/i18n@8.0.0-rc.1, @nuxt/image@1.0.0-rc.1\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-tqq5me?file=app.vue,layouts%2Fdefault.vue,pages%2Findex.vue,nuxt.config.ts,package.json\r\n\r\n(run npm build, npm preview, then open the preview in a new window with JS disabled)\r\n\r\n### Describe the bug\r\n\r\nWhen a client-only component is defined within a layout somewhere (it can be nested) it seems to be removing all the CSS styles from any components defined in the layout (page-level components eg. within `NuxtPage` are fine!) in a very specific use case;\r\n\r\nI had a LOT of trouble reproducing this issue, but it seems to only occur if a Lazy component is included within a Client component, and both of those are using the same npm library (in the repro - date-fns).\r\n\r\nThis is only observed in the server-rendered version of the page. Eg. we're getting a short burst of some unstyled layout-level components like the menu, then their CSS is only added upon hydration -- even though these are not client-only components! Their templates are rendered but their CSS is not added to the `\u003Chead>`\r\n\r\nThis further only seems to occur in the optimized production build -- not on `nuxt dev`, only on `build && preview`\r\n\r\nNo errors are shown, and hydration works fine, just the CSS is not being rendered in the HTML before hydration for some reason.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3055,3056,3059,3060,3061,3062],{"name":2952,"color":2953},{"name":3057,"color":3058},"workaround available","11376d",{"name":2933,"color":2934},{"name":2956,"color":2957},{"name":2936,"color":2937},{"name":2939,"color":2940},22507,"Styles defined in layout omitted from the server-rendered HTML, when Client- and Lazy component use the same package in their code","2024-01-28T21:27:24Z","https://github.com/nuxt/nuxt/issues/22507",0.64704126,["Reactive",3069],{},["Set"],["ShallowReactive",3072],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f44FEo3uqWFc62bhAr6WLKOP3wWo3oQ8n8vmvWEjsWxQ":-1},"/nuxt/nuxt/27417"]