\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```",[3163],{"name":3140,"color":3141},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.70835143,{"description":3170,"labels":3171,"number":3176,"owner":3143,"repository":3143,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `plugins`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. Set dark mode\r\n2. Refresh\r\n3. Values are updated correctly, but component markup still renders visually for light mode\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-kkazxz?file=app.vue\n\n### Describe the bug\n\nI've run into this issue when working on dark mode for https://github.com/inkline/inkline. \r\n\r\nEverything works correctly except setting dark mode, storing to localStorage and then refreshing:\r\n- The component variables have the correct values\r\n- The component markup renders incorrectly\r\n\r\n=> The view renders as light mode even though all the variable values \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3172,3175],{"name":3173,"color":3174},"3.x","29bc7f",{"name":3140,"color":3141},12533,"closed","Hydration causes incorrect rendering for dark mode even though all variables have correct values","2023-01-19T16:06:43Z","https://github.com/nuxt/nuxt/issues/12533",0.67189807,{"description":3183,"labels":3184,"number":3187,"owner":3143,"repository":3143,"state":3177,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Environment\n\n- Operating System: Windows 10\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.21\r\n- Builder: -\r\n- User Config: routeRules, devtools, css, runtimeConfig, nitro, modules, alias, vite, components\r\n- Runtime Modules: @nuxtjs/i18n@8.0.0-rc.5, nuxt-icons@3.2.1, @unocss/nuxt@0.57.7, @element-plus/nuxt@1.0.7, @vueuse/nuxt@10.7.0, @vueuse/motion/nuxt@2.0.0, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxtjs/device@3.1.1\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-rr4shs?file=app.vue\n\n### Describe the bug\n\nIn the dark mode && toggleDark from @vueuse/core, refresh the page, we would see the background color of the page flashes from white to black. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3185,3186],{"name":3173,"color":3174},{"name":3140,"color":3141},24819,"Background color flashes between light and dark mode using @vueuse/nuxt","2023-12-20T03:49:21Z","https://github.com/nuxt/nuxt/issues/24819",0.6766104,{"description":3193,"labels":3194,"number":3195,"owner":3143,"repository":3196,"state":3177,"title":3197,"updated_at":3198,"url":3199,"score":3200},"Hi, I love the new website and thank you for listing up my avatar in landing page ❤️ \r\n\r\nBy the way, I found that \"Edit this page\" links are not correctly set.\r\n\r\nFor example,\r\n\r\n\"Edit this page\" text in the right side bar in https://nuxt.com/docs/getting-started/introduction\r\n\r\nis linked to\r\n\r\nhttps://nuxt.com/docs/getting-started/introduction.",[],1378,"nuxt.com","\"Edit this page\" link is wrong","2023-10-19T09:15:05Z","https://github.com/nuxt/nuxt.com/issues/1378",0.67829406,{"description":3202,"labels":3203,"number":3208,"owner":3143,"repository":3143,"state":3177,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxtjs/color-mode@3.4.2\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-ycyewb?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI set 3 different `theme-color` meta tags using `useHead` in `app.vue`.\r\n\r\n```ts\r\nuseHead({\r\n meta: [\r\n\t // Set theme-color based on color mode\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'system prefers light mode',\r\n\t\t media: '(prefers-color-scheme: light)',\r\n\t\t content: colorMode.preference === 'dark' ? '#111827' : '#ffffff',\r\n\t },\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'system prefers dark mode',\r\n\t\t media: '(prefers-color-scheme: dark)',\r\n\t\t content: colorMode.preference === 'light' ? '#ffffff' : '#111827',\r\n\t },\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'fallback for browsers without media support for theme-color',\r\n\t\t // use dark style by default, unless preference is set to light explicitly.\r\n\t\t content: colorMode.preference === 'light' ? '#ffffff' : '#111827',\r\n\t },\r\n ],\r\n})\r\n```\r\n\r\nI expect the following meta tags to be present when loading the page:\r\n```\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: light)\" content=\"#ffffff\">\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#111827\">\r\n\u003Cmeta name=\"theme-color\" content=\"#111827\">\r\n```\r\nIn fact, after the initial render (SSR) these meta tags are correctly set. I verified using curl.\r\n\r\nHowever, after client hydration, the meta tags change to the following:\r\n```\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#ffffff\">\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#111827\">\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_",[3204,3205],{"name":3140,"color":3141},{"name":3206,"color":3207},"upstream","E8A36D",28298,"theme-color meta tags are incorrectly deduped","2024-07-24T16:45:51Z","https://github.com/nuxt/nuxt/issues/28298",0.68316364,{"labels":3214,"number":3217,"owner":3143,"repository":3143,"state":3177,"title":3218,"updated_at":3219,"url":3220,"score":3221},[3215,3216],{"name":3173,"color":3174},{"name":3140,"color":3141},13517,"Modules conflict @nuxtjs/device and @nuxtjs/color-mode","2023-01-19T16:58:43Z","https://github.com/nuxt/nuxt/issues/13517",0.68701476,{"description":3223,"labels":3224,"number":3231,"owner":3143,"repository":3232,"state":3177,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Description\n\nI have a personal project that I upgrade from version 2 to 3. I noticed when doing this the UInput no longer expands to the div container.\n\nIn version 2 the parent container is:\n\n```\n\u003CUFormGroup>\n \u003CUInput />\n\u003C/UFormGroup>\n```\n\n```\n\u003Cdiv class=“relative”>\n \u003Cinput>…\n\u003C/div>\n```\n\nHowever in version 3 it is\n\n```\n\u003CUFormField>\n \u003CUInput />\n\u003C/UFormField >\n```\n\n```\n\u003Cdiv class=“relative inline-flex items-center”>\n \u003Cinput>…\n\u003C/div>\n```\n\nThis is causing the `\u003Cinput>` to not expand to the full width of the parent container. Is there a way to edit this in Nuxt UI 3 to make it fully expand to the parent container?\n\n",[3225,3228],{"name":3226,"color":3227},"question","d876e3",{"name":3229,"color":3230},"v3","49DCB8",3955,"ui","UInput not flexing when upgrading from v2 to v3","2025-04-22T14:14:04Z","https://github.com/nuxt/ui/issues/3955",0.69568485,{"description":3238,"labels":3239,"number":3247,"owner":3143,"repository":3232,"state":3177,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.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@3.0.0-alpha.9, @nuxt/eslint@0.7.2, @nuxtjs/seo@2.0.2, @nuxtjs/plausible@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.9\n\n### Reproduction\n\nOn a brand new project:\n\n```\nnpx nuxi@latest init my-app\ncd my-app\nnpm install @nuxt/ui@next\n```\n\nThen\n/app/app.vue\n```vue\n\u003Ctemplate>\n\t\u003CNuxtLayout>\n\t\t\u003CNuxtPage />\n\t\u003C/NuxtLayout>\n\u003C/template>\n```\n\nnuxt.config.ts\n```js\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n\tcompatibilityDate: \"2024-11-01\",\n modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo'],\n css: ['~/assets/css/main.css'],\n\n\tdevtools: { enabled: true },\n\tfuture: {\n\t\tcompatibilityVersion: 4,\n\t},\n\tui: {\n // error here\n\t\tcolorMode: false,\n\t},\n});\n\n```\n\n### Description\n\nWhen changing the ui.colorMode to false AND using the `pages` folder, it crashes the whole app (error below).\n\n\n```\n500\n[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n\n/* Injection by vite-plugin-vue-inspector Start */\nimport { createVNode as __createVNode } from 'vue'\nfunction _interopVNode(vnode) {\n if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {\n const data = vnode.props['data-v-inspector']\n delete vnode.props['data-v-inspector']\n Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })\n }\n return vnode\n}\nfunction _createVNode(...args) { return _interopVNode(__createVNode(...args)) }\n/* Injection by vite-plugin-vue-inspector End */\nimport { defineComponent as _defineComponent } from \"vue\";\nimport { onUnmounted, onMounted, reactive } from \"vue\";\nimport { pascalCase } from \"scule\";\nimport { defineAsyncComponent, useColorMode, useRoute } from \"#imports\";\nconst _sfc_main = /* @__PURE__ */ _defineComponent({\n __name: \"DevtoolsRenderer\",\n setup(__props, { expose: __expose }) {\n __expose();\n const route = useRoute();\n const component = route.query?.example ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`)) : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug)}.vue`));\n const state = reactive({});\n function onUpdateRenderer(event) {\n state.props = { ...event.data.props };\n state.slots = { ...event.data.slots };\n }\n const colorMode = useColorMode();\n function setColorMode(event) {\n colorMode.preference = event.isDark ? \"dark\" : \"light\";\n }\n onMounted(() => {\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onUnmounted(() => {\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onMounted(async () => {\n const event = new Event(\"nuxt-ui-devtools:component-loaded\");\n (void 0).parent.dispatchEvent(event);\n });\n onMounted(() => {\n if (!route.query?.example) return;\n });\n const __returned__ = { route, component, state, onUpdateRenderer, colorMode, setColorMode };\n Object.defineProperty(__returned__, \"__isScriptSetup\", { enumerable: false, value: true });\n return __returned__;\n }\n});\nimport { resolveComponent as _resolveComponent, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from \"vue\";\nimport { ssrRenderVNode as _ssrRenderVNode, ssrRenderComponent as _ssrRenderComponent, ssrRenderAttrs as _ssrRenderAttrs } from \"vue/server-renderer\";\nfunction _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {\n const _component_UApp = _resolveComponent(\"UApp\");\n _push(`\u003Cdiv${_ssrRenderAttrs(_mergeProps({\n id: \"ui-devtools-renderer\",\n class: \"nuxt-ui-component-renderer\",\n \"data-v-inspector\": \"../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue:44:3\"\n }, _attrs))}>`);\n _push(_ssrRenderComponent(_component_UApp, { toaster: null }, {\n default: _withCtx((_, _push2, _parent2, _scopeId) => {\n if (_push2) {\n if ($setup.component) {\n _ssrRenderVNode(_push2, _createVNode(_resolveDynamicComponent($setup.component), _mergeProps($setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null), _parent2, _scopeId);\n } else {\n _push2(`\u003C!---->`);\n }\n } else {\n return [\n $setup.component ? (_openBlock(), _createBlock(_resolveDynamicComponent($setup.component), _mergeProps({ key: 0 }, $setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null, 16, [\"class\", \"ui\"])) : _createCommentVNode(\"v-if\", true)\n ];\n }\n }),\n _: 1\n /* STABLE */\n }, _parent));\n _push(`\u003C/div>`);\n}\nimport \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?vue&type=style&index=0&lang.css\";\nimport { useSSRContext as __vite_useSSRContext } from \"vue\";\nconst _sfc_setup = _sfc_main.setup;\n_sfc_main.setup = (props, ctx) => {\n const ssrContext = __vite_useSSRContext();\n (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add(\"../../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\");\n return _sfc_setup ? _sfc_setup(props, ctx) : void 0;\n};\nimport _export_sfc from \"\\0plugin-vue:export-helper\";\nexport default /* @__PURE__ */ _export_sfc(_sfc_main, [[\"ssrRender\", _sfc_ssrRender], [\"__file\", \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\"]]);\n\nat /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3240,3243,3246],{"name":3241,"color":3242},"bug","d73a4a",{"name":3244,"color":3245},"duplicate","cfd3d7",{"name":3229,"color":3230},2823,"`colorMode: false` + /pages/ crash the app","2024-12-03T09:33:17Z","https://github.com/nuxt/ui/issues/2823",0.6969049,["Reactive",3253],{},["Set"],["ShallowReactive",3256],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJE28lE9wwawzMy-7oIxWvSLZWIBx3uo9HUQ1MQXcXYY":-1},"/nuxt/ui/4459"]