\n```\n\n## Why this matters\n\n- It improves flexibility for styling without requiring full slot overrides \n- It handles dynamic styles that can’t be expressed with Tailwind classes \n- It aligns with the existing `meta.class` design in both `TableMeta` and `ColumnMeta`, keeping things consistent and declarative\n\n### Additional context\n\n_No response_",[3020,3023],{"name":3021,"color":3022},"enhancement","a2eeef",{"name":3024,"color":3025},"v3","49DCB8",4475,"nuxt","ui","closed","Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.6933308,{"description":3035,"labels":3036,"number":3040,"owner":3027,"repository":3027,"state":3029,"title":3041,"updated_at":3042,"url":3043,"score":3044},"# **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>",[3037],{"name":3038,"color":3039},"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.71172345,{"labels":3046,"number":3053,"owner":3027,"repository":3027,"state":3029,"title":3054,"updated_at":3055,"url":3056,"score":3057},[3047,3050],{"name":3048,"color":3049},"3.x","29bc7f",{"name":3051,"color":3052},"upstream","E8A36D",13290,"How \u003CStyle> or useMeta style works with dynamic values ?","2023-01-19T16:51:10Z","https://github.com/nuxt/nuxt/issues/13290",0.71938264,{"description":3059,"labels":3060,"number":3068,"owner":3027,"repository":3027,"state":3029,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Version\n\n[v2.4.0](https://github.com/nuxt.js/releases/tag/v2.4.0)\n\n### Reproduction link\n\n[https://github.com/GRIM4CE/nuxt-css-module-issue](https://github.com/GRIM4CE/nuxt-css-module-issue)\n\n### Steps to reproduce\n\nIn vue-component `import style from './index.css`' and set css-module in a computed property to imported style object: `computed: { style() { return style }`. In template html add `\u003Csection :class=\"style.container\">` css-module to a element.\n\nindex.css\n`.container {\n background-color: aqua;\n width: 100vw;\n height: 100vh;\n}`\n\n### What is expected ?\n\ncss json object is imported and css-module classes are populated in vue-component, styles render as expected\n\n### What is actually happening?\n\nempty object is returned from import, css-module classes are not populated and styles don't render\n\n### Additional comments?\n\nI originally stumbled upon this issue after creating a private component library for work that utilized css-modules to switch between to different types of themes on package config. Everything looked great on our vue projects but once I uploaded the package to Nuxt it was obvious the package styles weren't working correctly.\n\nI'm not completely sure if this is an issue with Nuxt but I've tested Vue-cli-3 by enabling css-modules and the expected behavior works by default. I dug through both Nuxt and Vue-cli-3 build loaders and don't see anything immediately that would cause different behavior between the two. It was suggested I delete the resourceQuery from the css-loader, this allowed css-modules to work as expected but broke normal template styles.\n\n\n\n\u003C!--cmty-->\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/c8909\">#c8909\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3061,3064,3067],{"name":3062,"color":3063},"stale","ffffff",{"name":3065,"color":3066},"pending triage","E99695",{"name":3038,"color":3039},5358,"CSS-Modules not importing stylesheets correctly in vue-component script","2023-01-22T15:33:05Z","https://github.com/nuxt/nuxt/issues/5358",0.72101855,{"description":3074,"labels":3075,"number":3089,"owner":3027,"repository":3027,"state":3029,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.7.3\r\n- CLI Version: 3.8.3\r\n- Nitro Version: 2.6.3\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: css, build, modules, vite, ssr, i18n, nitro, alias, hooks\r\n- Runtime Modules: @nuxtjs/i18n@8.0.0-rc.4\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/sandbox/upgrade-issue-9l4xcf\r\n\r\n### Describe the bug\r\n\r\ngetHead() is not being called and therefore vuetify-theme-stylesheet is not being injected when \u003CNuxtPage /> is present on a page which doesn't have any nested pages.\r\n\r\nThe issue is occurring at the following location where hydratingCount is never reaching 0 and therefore the hook app:suspense:resolve is not being raised:\r\nhttps://github.com/nuxt/nuxt/blob/b95c85b5524b66bf53ed684f0a6a5fc36da09391/packages/nuxt/src/app/nuxt.ts#L236\r\n\r\nOn the reproduction, click the link `Go To Page`. Test 1 text is yellow. If you hard refresh, the text turns to black because of the vuetify-theme-stylesheet styles are not injected and therefore the CSS variable primary is not present.\r\n\r\nI understand it shouldn't be there as it doesn't have nested pages however I don't think it should break the styling?\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3076,3077,3080,3083,3086],{"name":3048,"color":3049},{"name":3078,"color":3079},"workaround available","11376d",{"name":3081,"color":3082},"bug","d73a4a",{"name":3084,"color":3085},"pages","00DFB5",{"name":3087,"color":3088},"🔨 p3-minor","FBCA04",23468,"NuxtPage within a page without nested pages causes vuetify-theme-stylesheet not to be injected","2023-10-01T15:22:41Z","https://github.com/nuxt/nuxt/issues/23468",0.7219124,{"description":3095,"labels":3096,"number":3098,"owner":3027,"repository":3027,"state":3029,"title":3099,"updated_at":3100,"url":3101,"score":3102},"**Question**\r\nThere may be an obvious solution that I am overlooking, but I am not able to `import` my `main.scss` file from `assets` into a component.\r\n\r\n````scss\r\n\u003Cstyle lang=\"scss\" scoped>\r\n@import '~assets/main.scss';\r\n\u003C/style>\r\n````\r\nThis generates the following error: \r\n````\r\nThis dependency was not found:\r\n\r\n* !!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-compiler/index?{\"id\":\"data-v-3bb4be04\",\"scoped\":true,\"hasInlineConfig\":true}!sass-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./NavBar.vue in ./components/NavBar.vue\r\n\r\nTo install it, you can run: npm install --save !!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-compiler/index?{\"id\":\"data-v-3bb4be04\",\"scoped\":true,\"hasInlineConfig\":true}!sass-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./NavBar.vue\r\n````\r\n\r\nI have installed _vue-style-loader_ and added it to my config file:\r\n````javascript\r\nvendor: ['vue-style-loader'],\r\n````\r\n\r\nTLDR: **How can I import a SCSS stylesheet from `assets` into a component?**\r\n\r\nThanks, \r\nChristopher\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/c519\">#c519\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3097],{"name":3038,"color":3039},601,"Extend Global SCSS Stylesheet in Component","2023-01-18T15:39:32Z","https://github.com/nuxt/nuxt/issues/601",0.72266006,{"labels":3104,"number":3105,"owner":3027,"repository":3027,"state":3029,"title":3106,"updated_at":3107,"url":3108,"score":3109},[],11878,"webpack build fails with css in sfc","2023-01-19T15:48:16Z","https://github.com/nuxt/nuxt/issues/11878",0.72294605,{"description":3111,"labels":3112,"number":3122,"owner":3027,"repository":3027,"state":3029,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Environment\n\n```\r\nWorking directory: /home/projects/nuxt-starter-ta6mqt\r\nNuxt project info:\r\n\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: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\n[Reproduction repository](https://stackblitz.com/edit/nuxt-starter-ta6mqt)\r\n\r\n- run `npm run build && npm run preview`\r\n- access the page and look at the HTML response\r\n- notice that the styles for both `layout.vue` and `AsyncCompParent.vue` are NOT inlined in the response\r\n\n\n### Describe the bug\n\nThere seems to be an issue when using a common mapping object to create associations to various components that need to be loaded dynamically.\r\n\r\nThis is a rather complex system so please follow along carefully.\r\n- we have an enum in `@/utils/name-map.js`\r\n- this enum is used in a parent component (`AsyncCompParent`) that will decide which other component to render based on an association map\r\n - these child components (`ChildComponentA`) are declared using `defineAsyncComponent` in order to achieve code splitting\r\n- The async component (`ChildComponentA`) uses a composable (`useSayMyName.js`) that, in turn, ALSO imports the enum\r\n\r\nThe setup above will cause the following:\r\n- no styles declared in `AsyncCompParent` are inlined in the SSR HTML response\r\n- no styles in `layout.vue` (which is the _parent_ of `AsyncCompParent`) are inlined in the SSR HTML response\r\n\r\n#### Expected behaviour\r\nThe styles for `layout.vue` and `AsyncCompParent.vue` should be inlined in the SSR HTML response, since these components are always present on the page and rendered at load time.\r\n\n\n### Additional context\n\nThe repo above is an extremely simplified version of code we ported from a Nuxt 2 app, where it functions as expected.\r\n\r\nMore background / things we discovered:\r\n- if, in any of the two files that import from `@/utils/name-map`, we instead redeclare a local copy of that constant, the build goes ahead as expected and the CSS is inlined (see comment in the code)\r\n- if we don't use `defineAsycnComponent`, and just use plain a `import` statement for `ChildComponentA`, the build goes ahead as expected\r\n- if we don't import `useSayMyName` in `ChildComponentA`, and instead import the enum directly there, the build goes ahead as expected\r\n\r\nNone of the options presented above are valid alternatives for us given the complexity of our code and, to be fair, I don't think we are doing any illegal coding patterns - this feels like a very common use-case for example when you want to trigger various flows from the same component and don't want the flow code to be included in the bundle since they might never be triggered.\n\n### Logs\n\n_No response_",[3113,3114,3115,3118,3119],{"name":3048,"color":3049},{"name":3081,"color":3082},{"name":3116,"color":3117},"vite","3574D1",{"name":3087,"color":3088},{"name":3120,"color":3121},"inline styles","68AF97",25451,"On production build, CSS does not get inlined in SSR response in some cases when using `defineAsyncComponent`","2024-01-28T21:27:19Z","https://github.com/nuxt/nuxt/issues/25451",0.7232011,{"labels":3128,"number":3132,"owner":3027,"repository":3027,"state":3029,"title":3133,"updated_at":3134,"url":3135,"score":3136},[3129,3131],{"name":3021,"color":3130},"8DEF37",{"name":3038,"color":3039},8007,".scss files can not use cssModules","2023-01-22T15:52:36Z","https://github.com/nuxt/nuxt/issues/8007",0.72366315,{"labels":3138,"number":3144,"owner":3027,"repository":3027,"state":3029,"title":3106,"updated_at":3145,"url":3146,"score":3147},[3139,3140,3141],{"name":3048,"color":3049},{"name":3081,"color":3082},{"name":3142,"color":3143},"webpack","650C6F",11821,"2023-01-19T15:48:39Z","https://github.com/nuxt/nuxt/issues/11821",0.72497344,["Reactive",3149],{},["Set"],["ShallowReactive",3152],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdeJPVFxYNWO25dekoaIjU_99ZwfvJQlv3cCTZWUzD0Q":-1},"/nuxt/test-utils/619"]