results in hydration errors","2025-08-08T23:18:11Z","https://github.com/nuxt/ui/issues/4684",0.6889311,{"description":3152,"labels":3153,"number":3157,"owner":3144,"repository":3144,"state":3146,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Environment\n\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.0\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-mhdow8?file=app.vue\r\n\r\nClick the button \"show erroring component\" and observe that the error doesn't contain any useful information.\n\n### Describe the bug\n\nThe error object should contain the error properties and not a stringified error.\r\n\r\nAlso the clearError() helper doesn't seem to work?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3154],{"name":3155,"color":3156},"pending triage","E99695",24381,"NuxtErrorBoundary captures stringified error instead of error object","2024-06-30T11:06:50Z","https://github.com/nuxt/nuxt/issues/24381",0.6948485,{"description":3163,"labels":3164,"number":3168,"owner":3144,"repository":3145,"state":3146,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.19.0, @nuxt/scripts@0.11.7, @nuxt/eslint@1.4.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/r7ryl3\n\n### Description\n\nI recently upgrade to NuxtUI 3.1.2 (from 3.0.1) and It's impossible (or I don't know) how to deal with custom type for `InputMenu`, I got some types issues on `label-key`, `v-model`, `items`, `slots` as you can see in my reproduction.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3165,3166,3167],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4182,"Custom type with InputMenu","2025-05-19T12:22:28Z","https://github.com/nuxt/ui/issues/4182",0.69616127,{"description":3174,"labels":3175,"number":3184,"owner":3144,"repository":3145,"state":3185,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo2\n\n### Description\n\nThe empty character in the column header will cause a console error: \"Hydration completed but contains mismatches.\" However, the functionality is normal.\n\n----\n\n### Workaround\nchange from:\n```js\n{\n accessorKey: 'action',\n header: '',\n}\n```\nto\n```js\n{\n accessorKey: 'action',\n header: ' ',\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nclient:742 [vite] connecting...\nclient:861 [vite] connected.\nruntime-core.esm-bundler.js:7013 \u003CSuspense> is an experimental feature and its API will likely change.\nruntime-core.esm-bundler.js:1638 Hydration completed but contains mismatches.\nlogMismatchError @ runtime-core.esm-bundler.js:1638\nhydrateFragment @ runtime-core.esm-bundler.js:2046\nhydrateNode @ runtime-core.esm-bundler.js:1766\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateFragment @ runtime-core.esm-bundler.js:2034\nhydrateNode @ runtime-core.esm-bundler.js:1766\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateFragment @ runtime-core.esm-bundler.js:2034\nhydrateNode @ runtime-core.esm-bundler.js:1766\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrateSuspense @ runtime-core.esm-bundler.js:7264\nhydrateNode @ runtime-core.esm-bundler.js:1836\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrate @ runtime-core.esm-bundler.js:1674\nmount @ runtime-core.esm-bundler.js:3939\napp.mount @ runtime-dom.esm-bundler.js:1786\ninitApp @ entry.js:65\nawait in initApp\n(anonymous) @ entry.js:73\ndevtools.client.js:49 ✨ Nuxt DevTools Press Shift + Option + D to open DevTools\n```",[3176,3177,3178,3179,3182],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3180,"color":3181},"closed-by-bot","ededed",{"name":3183,"color":3181},"stale",2976,"closed","Empty string in column header will cause Hydration console error","2025-06-18T09:05:10Z","https://github.com/nuxt/ui/issues/2976",0.64469177,{"description":3191,"labels":3192,"number":3198,"owner":3144,"repository":3145,"state":3185,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `srcDir`, `routeRules`, `app`, `svgSprite`, `alias`, `css`, `imports`, `modules`, `ssr`, `runtimeConfig`\n- Runtime Modules: `@nuxt/eslint@1.4.1`, `@nuxt/fonts@0.11.4`, `@nuxt/icon@1.14.0`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.8`, `@nuxt/test-utils@3.19.1`, `@nuxt/ui@3.1.3`, `@nuxtjs/svg-sprite@1.0.2`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/dreamy-euler-9595k7\n\n\n### Description\n\n\n\nHi when i select copy payment id i got that error when i console log the row it gives me undefined upon clicking kindly check this link: https://ui.nuxt.com/components/table#with-context-menu\n\n#4259 \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3193,3194,3197],{"name":3135,"color":3136},{"name":3195,"color":3196},"needs reproduction","CB47CF",{"name":3138,"color":3139},4452,"UTable context menu error during selection of items","2025-07-13T16:34:46Z","https://github.com/nuxt/ui/issues/4452",0.66553646,{"description":3204,"labels":3205,"number":3210,"owner":3144,"repository":3144,"state":3185,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: extends, modules, hooks\r\n- Runtime Modules: @nuxt/content@2.12.0, @nuxt/ui@2.14.1\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/draftman-nuxt-reproduction-2\r\n\r\n### Describe the bug\r\n\r\nSince migrating from nuxt2 to nuxt3, I've noticed multiple hydration problems, particularly with nuxt/content rendering.\r\nIn this case, it happen when a wrapper is added around ProseImg component.\r\n\r\n### Additional context\r\n\r\nSSR :\r\n\r\n\r\nAfter hydration :\r\n\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003Cimg src=\"https://i.imgur.com/xyywXJ1.png\" alt=\"Test\" data-v-inspector=\"components/content/ProseImg.vue:3:5\">\r\n- expected on client: Symbol(v-cmt) \r\n at \u003CCallout icon=\"i-heroicons-light-bulb\" > \r\n at \u003CAsyncComponentWrapper icon=\"i-heroicons-light-bulb\" > \r\n at \u003CMDCRenderer body= Object data= Object tag=\"div\" ... > \r\n at \u003CContentRendererMarkdown value= Object excerpt=false tag=\"div\" > \r\n at \u003CContentRenderer value= Object excerpt=false tag=\"div\" > \r\n at \u003CContentQuery path=\"/\" find=\"one\" > \r\n at \u003CContentDoc> \r\n at \u003C[...slug] onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" vnode= Object route= Object ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CNuxtLayoutProvider layoutProps= Object key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n",[3206,3209],{"name":3207,"color":3208},"3.x","29bc7f",{"name":3155,"color":3156},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.6735471,{"description":3216,"labels":3217,"number":3223,"owner":3144,"repository":3145,"state":3185,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, colorMode, build, runtimeConfig, app, lodash, vite, router, nitro\n- Runtime Modules: @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/test-utils/module@3.17.2, @vueuse/nuxt@11.3.0, nuxt-\ncountdown@1.2.0, nuxt-lodash@2.5.3, nuxt-monaco-editor@1.3.1, @nuxt/eslint@1.3.0, @nuxt/eslint@1.3.0, @nuxt/fonts@0.11.1, @nuxt/icon@1.12\n.0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.6, @nuxt/test-utils@3.17.2, @nuxt/ui@3.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/fervent-ptolemy-6njy2z?workspaceId=ws_SZ9iN2xj3x4VbwxN8x8baL&embed=1&file=%2Fapp%2Fpages%2Findex.vue\n\n### Description\n\nYou cannot dynamically add/remove columns, top toggle should control the visibility of the Status column\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3218,3219,3220],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3221,"color":3222},"upstream","78bddb",4024,"Dynamic table columns","2025-06-30T13:20:36Z","https://github.com/nuxt/ui/issues/4024",0.6791434,{"description":3229,"labels":3230,"number":3233,"owner":3144,"repository":3144,"state":3185,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Environment\n\nNuxi 3.5.2\r\nNuxt project info:\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@9.6.7\r\n- Builder: vite\r\n- User Config: modules\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.7.0, @vueuse/nuxt@10.1.2\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://github.com/Archetipo95/nuxt-error-layout\n\n### Describe the bug\n\nI encountered a bug while customizing the error page in the Nuxt framework. The issue results in a hydration mismatch error and component duplication. I have created a minimal reproduction, where accessing a non-existent page triggers a warning in the console (/asd).\r\n\r\nPlease let me know if you need additional information. I appreciate your prompt attention to this matter.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3231,3232],{"name":3207,"color":3208},{"name":3155,"color":3156},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.68464446,{"description":3239,"labels":3240,"number":3243,"owner":3144,"repository":3144,"state":3185,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.15.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: bun@1.0.4\r\n- Builder: -\r\n- User Config: colorMode, devtools, experimental, typescript, modules, css, ui, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.4.11, @nuxt/ui@2.9.0, nuxt-security@0.14.4\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-dgvnv6-s4j4zq?file=pages%2Findex.vue\n\n### Describe the bug\n\nA simple use of `useFetch` and `v-if` inside the template is returning a Hydration node mismatch. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: Symbol(\"v-cmt\") \r\n- Server rendered DOM: \r\n\u003Cdiv> \u003Cempty string> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" vnode= \r\nObject { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }\r\n route= \r\nObject { fullPath: \"/\", hash: \"\", query: {}, name: \"index\", path: \"/\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: \"/\" }\r\n ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[3241,3242],{"name":3207,"color":3208},{"name":3155,"color":3156},23572,"Hydration node mismatch","2023-10-08T14:43:58Z","https://github.com/nuxt/nuxt/issues/23572",0.68599266,{"description":3249,"labels":3250,"number":3252,"owner":3144,"repository":3144,"state":3185,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.4\n- Nitro Version: 2.11.0\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\n[https://stackblitz.com/edit/github-gktrh3sr](https://stackblitz.com/edit/github-gktrh3sr)\n\nFirst navigate to /page2 to confirm the text is red and it contains the attribute `data-important=\"true\"`.\n\nThen navigate to /page1. It will immediately redirect to /page2 but the text will be black and the attribute will be missing. There will also be a warning in the console.\n\n### Describe the bug\n\nWhen loading a page, a global middleware redirects to other page but the top level element loses its attributes, causing a hydration mismatch.\n\nMay be related to #20187 and #25650.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration text content mismatch on \n\u003Ch1 data-v-inspector=\"pages/page1.vue:3:5\"> \n - rendered on server: Secret page\n - expected on client: Public Page \n at \u003CPage2 onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/page2\" vnode= Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … } route= \n Object { fullPath: \"/page2\", hash: \"\", query: {}, name: \"page2\", path: \"/page2\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: \"/page2\" } ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CNuxtLayoutProvider layoutProps= Object { ref: {…} } key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot> runtime-core.esm-bundler.js:51:12\nHydration completed but contains mismatches. .localservice@runtime.495c5120.js:26:36955\n[Vue warn]: Hydration class mismatch on \n\u003Cdiv data-v-inspector=\"pages/page1.vue:2:3\"> \n - rendered on server: class=\"null\"\n - expected on client: class=\"text-red\"\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\n You should fix the source of the mismatch. \n at \u003CPage2 onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/page2\" vnode= Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … } route= \n Object { fullPath: \"/page2\", hash: \"\", query: {}, name: \"page2\", path: \"/page2\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: \"/page2\" } ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CNuxtLayoutProvider layoutProps= Object { ref: {…} } key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[3251],{"name":3155,"color":3156},31228,"Hydration mismatch when navigating with middleware","2025-03-12T22:56:19Z","https://github.com/nuxt/nuxt/issues/31228",0.6861555,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBUFrfLc0XtkQlBRJ2caN1r_8SqBYXVwP_skVuSaLkbg":-1},"/nuxt/ui/4725"]