\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.70870143,{"description":3036,"labels":3037,"number":3042,"owner":3028,"repository":3029,"state":3030,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Description\n\n## No Clear Documentation for Targeting Active Styles in `NavigationMenu` Component\n\n### Description\n\nI'm trying to apply custom styles to the active state of a menu item in the `NavigationMenu` component, but there doesn't seem to be any clear documentation on how to do this.\n\nThe [theming docs](https://ui.nuxt.com/getting-started/theme#props) mention using the `:ui` attribute to target internal parts of a component, and the [theme structure for `NavigationMenu`](https://ui.nuxt.com/components/navigation-menu#theme) shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering `[object Object]`, which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.\n\nEven large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:\n\n```js\nlink: {\n base: 'px-3 py-2 rounded-md',\n active: 'bg-primary text-white font-medium'\n},\nvariants: {\n active: {\n true: {\n item: 'bg-primary text-white font-medium'\n }\n }\n}\n```\n\nThe only working solution so far is using data-* attributes like this:\n```js\nlink: 'text-md data-active:bg-primary data-active:text-white'\n```\nWhile this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.\n\n### Question\nWhat is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?",[3038,3041],{"name":3039,"color":3040},"question","d876e3",{"name":3022,"color":3023},4279,"Targeting active menu styles","2025-06-02T10:32:24Z","https://github.com/nuxt/ui/issues/4279",0.7123987,{"description":3048,"labels":3049,"number":3056,"owner":3028,"repository":3028,"state":3057,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.4.3\r\n- Nitro Version: 2.3.3\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-5hj7mv?file=nuxt.config.ts\r\n\r\n1. `npm run build; npm run preview`. Styles from `test` component are present in rendered html\r\n2. Go to `nuxt.config.ts` and set `experimental.inlineSSRStyles` to false.\r\n3. `npm run build; npm run preview`. Now button hasn't got its fancy styles\n\n### Describe the bug\n\nSometimes inline styles are bad, because they can be huge and as a result slow down the download of the main content. So, I decided to turn it off, but my page was somewhat broken because a lot of styles were missing (•_•)\n\n### Additional context\n\nif you visit `[repro host]/__nuxt_island/Test` with `inlineSSRStyles` set to `true`, there is `head.style` item. But if `inlineSSRStyles` set to `false`, there are nothing except for html content itself.\r\n\r\nGuessing from [this line](https://github.com/nuxt/nuxt/blob/1464294d6abe13b54fdb8d204732345551c8e647/packages/nuxt/src/core/runtime/nitro/renderer.ts#L337) scoped style tag should help, but in reality styles are still not there. So link to styles are not even in [rendered html](https://github.com/nuxt/nuxt/blob/1464294d6abe13b54fdb8d204732345551c8e647/packages/nuxt/src/core/runtime/nitro/renderer.ts#L335) ?\n\n### Logs\n\n_No response_",[3050,3053],{"name":3051,"color":3052},"3.x","29bc7f",{"name":3054,"color":3055},"pending triage","E99695",20582,"closed","No styles for server component if `experimental.inlineSSRStyles` is turned off","2023-05-11T22:33:19Z","https://github.com/nuxt/nuxt/issues/20582",0.71414775,{"description":3063,"labels":3064,"number":3072,"owner":3028,"repository":3029,"state":3057,"title":3073,"updated_at":3074,"url":3075,"score":3076},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3065,3066,3067,3070],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3068,"color":3069},"closed-by-bot","ededed",{"name":3071,"color":3069},"stale",2860,"[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.71503943,{"description":3078,"labels":3079,"number":3085,"owner":3028,"repository":3028,"state":3057,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@8.19.4\r\n- Builder: vite\r\n- User Config: vite, build\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\n**Repo:** https://github.com/ThornWalli/nuxt-testing/tree/feature/missing-component-style-tag\r\n```\r\nnpm i \r\nnpm run generate\r\n```\r\n\r\nTo compare, look in the file `.output/public/index.html`.\r\n\r\n**Vite Config**\r\n```\r\n{\r\n vite: {\r\n build: {\r\n cssCodeSplit: false\r\n }\r\n },\r\n}\r\n```\r\n\r\nThere are two pages:\r\n\r\n- Index `pages/index.vue`\r\n- Page 1 `pages/page-1.vue`\r\n\r\nThere are two components:\r\n\r\n- ComponentA `components/ComponentA.vue`\r\n- ComponentB `components/ComponentB.vue`\r\n\r\nOn the index page ComponentA and ComponentB are implemented.\r\n\r\nOn the page \"Page 1\" ComponentB is implemented.\r\n\r\n\r\n### Describe the bug\r\n\r\nOn the \"Index\" page, the style tag of ComponentB is missing if it is implemented on the \"Page 1\" page.\r\n\r\n\r\n\r\nIf the page \"Page 1\" is ignored (`.nuxtignore`), both style tags are present in the page \"Index\".\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_",[3080,3081,3082],{"name":3051,"color":3052},{"name":3019,"color":3020},{"name":3083,"color":3084},"🔨 p3-minor","FBCA04",21381,"Component StyleTags in SSR incorrect with builder `vite` with `cssCodeSplit: false`","2023-09-11T11:32:33Z","https://github.com/nuxt/nuxt/issues/21381",0.71721786,{"description":3091,"labels":3092,"number":3094,"owner":3028,"repository":3028,"state":3057,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### 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_",[3093],{"name":3054,"color":3055},28029,"Is inlining styles not working?","2024-07-04T17:24:25Z","https://github.com/nuxt/nuxt/issues/28029",0.72113854,{"description":3100,"labels":3101,"number":3106,"owner":3028,"repository":3028,"state":3057,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Describe the feature\n\nAs you can see, I selected API, But there is no any flag style,So i don't know which nav i has selected.Thanks!\r\n\r\n\u003Cimg width=\"1119\" alt=\"image\" src=\"https://user-images.githubusercontent.com/16911432/188371118-063d7239-85e0-4e94-9b9a-5004b84d0079.png\">\r\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3102,3105],{"name":3103,"color":3104},"documentation","5319e7",{"name":3051,"color":3052},14795,"why the class `nuxt-link-exact-active` or `nuxt-link-active` have not set other style when selected","2023-01-19T17:40:37Z","https://github.com/nuxt/nuxt/issues/14795",0.72164345,{"description":3112,"labels":3113,"number":3116,"owner":3028,"repository":3029,"state":3057,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3114,3115],{"name":3019,"color":3020},{"name":3022,"color":3023},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.72467476,{"description":3122,"labels":3123,"number":3126,"owner":3028,"repository":3028,"state":3057,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.0.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: yarn@1.22.17\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-dvdiuv?file=app.vue\n\n### Describe the bug\n\nHi,\r\n\r\nI encountered a problem while creating a generic app button component in my project. I am using the dynamic component creation method in Vue and when I send a _NuxtLink_ value to the is attribute of the component tag, it does not render. I didn't encounter this problem on nuxt2. But it doesn't work on nuxt3. How can I solve it?\r\n\r\n`\u003CComponent is=\"NuxtLink\" to=\"/page\">Link\u003C/Component>` doesn't render as a tag\n\n### Additional context\n\nMy button component\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\nComponent.app-button(\r\n :is=\"as\"\r\n v-bind=\"$attrs\"\r\n :class=\"[variantClass, textTypeClass, linkTypeClass, outlineClass, blockClass, iconPositionClass, loadingClass]\"\r\n role=\"button\"\r\n)\r\n template(v-if=\"$slots.prepend\")\r\n slot(name=\"prepend\")\r\n\r\n template(v-if=\"iconPosition === 'left'\")\r\n .app-button__icon\r\n slot(name=\"icon\")\r\n\r\n slot\r\n\r\n template(v-if=\"iconPosition === 'right'\")\r\n .app-button__icon\r\n slot(name=\"icon\")\r\n\r\n template(v-if=\"$slots.append\")\r\n slot(name=\"append\")\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { ButtonPropTypes } from './AppButton.component.types'\r\n\r\nconst baseClassName = 'app-button'\r\n\r\nconst props = withDefaults(defineProps\u003CButtonPropTypes>(), {\r\n as: 'button',\r\n variant: 'default',\r\n text: false,\r\n link: false,\r\n outline: false,\r\n block: false,\r\n iconPosition: 'left'\r\n})\r\n\r\nconst slots = useSlots()\r\n\r\nconst variantClass = computed(() => `${baseClassName}--${props.variant}`)\r\n\r\nconst textTypeClass = computed(() => props.text && `${baseClassName}--text`)\r\nconst linkTypeClass = computed(() => props.link && `${baseClassName}--link`)\r\nconst outlineClass = computed(() => props.outline && `${baseClassName}--outline`)\r\nconst blockClass = computed(() => props.block && `${baseClassName}--block`)\r\n\r\nconst iconPositionClass = computed(() => {\r\n if (slots.icon) {\r\n if (props.iconPosition === 'left') {\r\n return `${baseClassName}--iconLeft`\r\n } else if (props.iconPosition === 'right') {\r\n return `${baseClassName}--iconRight`\r\n } else {\r\n return null\r\n }\r\n } else {\r\n return null\r\n }\r\n})\r\n\r\nconst loadingClass = computed(() => props.loading && `${baseClassName}--loading`)\r\n\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\" src=\"./AppButton.component.scss\">\u003C/style>\r\n```\r\n\n\n### Logs\n\n_No response_",[3124,3125],{"name":3051,"color":3052},{"name":3054,"color":3055},23450,"\u003Ccomponent is=\"NuxtLink\" ...> doesn't render ","2023-09-28T12:29:53Z","https://github.com/nuxt/nuxt/issues/23450",0.7265327,{"description":3132,"labels":3133,"number":3138,"owner":3028,"repository":3028,"state":3057,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### Version\r\n\r\n[v1.4.0](https://github.com/nuxt.js/releases/tag/v1.4.0)\r\n\r\n### Reproduction link\r\n\r\n[https://fork-glider.glitch.me/](https://fork-glider.glitch.me/)\r\n\r\n### Steps to reproduce\r\n\r\n- Go to the link provided https://fork-glider.glitch.me/\r\n\r\nI use `vue-styled-components` for my styles but instead of being rendered properly, they flash the unstyled component before.\r\n\r\nLive example here: https://fork-glider.glitch.me/\r\nSource: https://glitch.com/edit/#!/fork-glider\r\n\r\nMy component looks like:\r\n\r\n```\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Capp-title>Welcome!\u003C/app-title>\r\n \u003Crouter-link to=\"/about\">About page\u003C/router-link>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import styled from 'vue-styled-components';\r\n\r\n const Title = styled.h1`\r\n font-size: 36px;\r\n color: red;\r\n `;\r\n\r\n export default {\r\n components: {\r\n \"app-title\": Title\r\n }\r\n };\r\n\u003C/script>\r\n```\r\n\r\nHere is a quick gif reproducing the issue:\r\n\r\n\r\n### What is expected ?\r\n\r\n- Title shows styled size and color\r\n\r\n### What is actually happening?\r\n\r\n- Title flashes original size and color before changing to styled one.\r\n\r\n(As this problem is not happening while using plain css, I am wondering if the issue has to do with the run-time of the `script` tag. 🤔)\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\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/c7294\">#c7294\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3134,3135],{"name":3054,"color":3055},{"name":3136,"color":3137},"2.x","d4c5f9",3479,"Unstyled css flashes while using vue-styled-components","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3479",0.7272465,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMdP9N1BYck1zZ8cXw2BKMsG7WS_OTP6HN8BXlND1Zjk":-1},"/nuxt/ui/4505"]