\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineNuxtComponent } from '#imports';\r\nimport Foo from '~/components/Foo.vue';\r\n\r\nexport default defineNuxtComponent({\r\n name: 'default',\r\n components: {\r\n Foo,\r\n },\r\n});\r\n\u003C/script>\r\n\r\n// foo component\r\n\u003Ctemplate>\r\n \u003Cdiv>foo\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineNuxtComponent } from '#imports';\r\n\r\nexport default defineNuxtComponent({\r\n name: 'Foo',\r\n});\r\n\u003C/script>\r\n\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nvue.js?v=4752a486:1355 [Vue warn]: Hydration text content mismatch in \u003Cdiv>:\r\n- Client: \r\n- Server: foo \r\n at \u003CFoo> \r\n at \u003CDefault > \r\n at \u003CLayoutLoader key=\"default\" name=\"default\" hasTransition=false > \r\n at \u003CFragmentWrapper > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\r\n```\n```\n",[3154,3157],{"name":3155,"color":3156},"3.x","29bc7f",{"name":3158,"color":3159},"pending triage","E99695",18511,"closed","Using defineNuxtComponent and components:false causes hydration mismatches error","2023-01-26T00:37:25Z","https://github.com/nuxt/nuxt/issues/18511",0.6197928,{"description":3167,"labels":3168,"number":3170,"owner":3144,"repository":3144,"state":3161,"title":3171,"updated_at":3172,"url":3173,"score":3174},"### 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```",[3169],{"name":3158,"color":3159},31228,"Hydration mismatch when navigating with middleware","2025-03-12T22:56:19Z","https://github.com/nuxt/nuxt/issues/31228",0.62487817,{"description":3176,"labels":3177,"number":3180,"owner":3144,"repository":3144,"state":3161,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### Environment\r\n\r\nAny\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-iuwbtr?file=package.json,components%2FHydrationMismatch.vue,app.vue\r\n\r\n### Describe the bug\r\n\r\nThis may be an upstream issue with Vue (almost 100% certain) but I would like to know your opinion on a workaround or possible fix: \r\n\r\n - The issue consists in not displaying \"Hydration completed but contains mismatches\" (in DEV and PRD envs) when we use an Async Component with a Mismatch. This is a severe issue for websites that serve milions of pages and have a mismatch but it is silent to our logs/obervability tooling.\r\n \r\n After some investigation it seems that when we use an Async Component the hydration is somewhat defered and at the moment of showing the `console.error(\"Hydration completed but contains mismatches\")` the code that hydrates (or checks for possible mismatches) the mismatch component did not run yet.\r\n \r\n After some debugging: \r\n \r\n\r\n\r\nWe see the hydrate function being called with the `nuxt-root` component in the first breakpoint. After that:\r\n\r\n\r\n\r\nThe `hasMismatch` flag continues to be `false`. I did put one more breakpoint at the `handleMismatch` function that is only called after already already running the `hydrate` function that has the `console.error()`:\r\n\r\n\r\n\r\nThis function was called with the vnode where I have the mismatch but it's already to late for the `console.error()` because it already ran with the `hasMismatch` being false.\r\n\r\nAny more information just ask, I will be happy to provide!\r\n\r\nAbout the reproduction, you can comment and uncomment the import statements in `app.vue` and see the different behaviours :)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3178,3179],{"name":3155,"color":3156},{"name":3158,"color":3159},23590,"Nuxt 3 - Hydration mismatch error is not shown if the mismatch is caused by an Async Component","2024-07-16T18:19:51Z","https://github.com/nuxt/nuxt/issues/23590",0.62782574,{"description":3186,"labels":3187,"number":3190,"owner":3144,"repository":3144,"state":3161,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### Environment\r\n\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v19.0.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `plugins`, `modules`, `alias`, `css`, `vite`, `i18n`, `content`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0-beta.7`, `@nuxt/content@2.3.0`, `nuxt-icons@3.0.0`, `modules/theme/module.ts`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-njmj9x?file=app.vue,components%2FNoScriptAlert.vue\r\n\r\n### Describe the bug\r\n\r\nWhen using \\\u003Cnoscript\\> tag, the client rendered correctly, but the server rendered incorrectly as plain text.\r\n\r\nAlthough running is not affected, a warning `Hydration node mismatch` and an error `Hydration completed but contains mismatches` are displayed in the console.\r\n\r\n### Additional context\r\n\r\nOnly JSX can be used instead of template, otherwise it seems that the style does not take effect.\r\n\r\nThe \\\u003CNoScript\\> component cannot be used *(it cannot be imported automatically, it can only be imported manually through `import { NoScript } from \"#components\";` or TypeScript will raise an undefined variable error)*, otherwise it will render the word **\"[object Object]\"**.\r\n\r\nCannot use \\\u003CClientOnly\\>, or it won't show when disable JavaScript.\r\n\r\n### Logs\r\n#### Warning\r\n```shell\r\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: div \r\n- Server rendered DOM: \"\u003Cdiv>\u003Ch1 class=\"_text_xs4ke_3\">JavaScript is Disabled\u003C/h1>\u003Cp>Please enable JavaScript then visit the website.\u003C/p>\u003C/div>\" (text) \r\n at \u003CNoScriptAlert> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\r\n```\r\n\r\n#### Error\r\n```shell\r\nHydration completed but contains mismatches.\r\n```",[3188,3189],{"name":3155,"color":3156},{"name":3158,"color":3159},12357,"Hydration node mismatch when use \u003Cnoscript> tag","2023-01-19T16:08:47Z","https://github.com/nuxt/nuxt/issues/12357",0.62821007,{"description":3196,"labels":3197,"number":3200,"owner":3144,"repository":3144,"state":3161,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### Environment\n\n```\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.14.0`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `typescript`, `telemetry`, `experimental`, `app`, `css`, `alias`, `build`, `postcss`, `modules`, `components`, `vite`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ilbkqd?file=app.vue\r\n\r\n\r\nopen console and `hover` dropdown\n\n### Describe the bug\n\nWhen using both antdv and nuxt3, an error ` Hydration node mismatch` is generated\r\n\r\n\r\nhttps://www.antdv.com/components/dropdown\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nchunk-3WQO23Z4.js?v=45f46078:1411 [Vue warn]: Hydration node mismatch:\r\n- Client vnode: Symbol(Comment) \r\n- Server rendered DOM: \"\" (text) \r\n at \u003CAMenuItem> \r\n at \u003CAnonymous> \r\n at \u003CResizeObserver disabled=true onResize=fn\u003ConOverflowResize2> > \r\n at \u003COverflow onMousedown=undefined prefixCls=\"ant-dropdown-menu-overflow\" component=\"ul\" ... > \r\n at \u003CAMenu mode=\"vertical\" selectable=false expandIcon=fn\u003CexpandIcon2> ... > \r\n at \u003CAlign target=fn\u003Cbound getRootDomNode> key=\"popup\" ref=Ref\u003C undefined > ... > \r\n at \u003CBaseTransition onBeforeEnter=fn\u003ConBeforeEnter> appear=false persisted=false ... > \r\n at \u003CTransition ref=Ref\u003C undefined > onBeforeEnter=fn\u003ConShowPrepare2> > \r\n at \u003CPopupInner prefixCls=\"ant-dropdown\" point=null align= {points: Array(2), overflow: {…}, offset: Array(2), targetOffset: Array(2), ignoreShake: true} ... > \r\n at \u003CPopup prefixCls=\"ant-dropdown\" destroyPopupOnHide=false visible=true ... > \r\n at \u003CPortal key=\"portal\" getContainer=fn\u003Cbound getContainer4> didUpdate=fn\u003Cbound handlePortalUpdate> > \r\n at \u003CTrigger openClassName=undefined minOverlayWidthMatchTrigger=undefined alignPoint=undefined ... > \r\n at \u003CAnonymous arrow=undefined trigger=\"hover\" visible=undefined ... > \r\n at \u003CADropdown> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\n```\n",[3198,3199],{"name":3155,"color":3156},{"name":3158,"color":3159},19161,"antdv [Vue warn]: Hydration node mismatch","2024-01-05T10:00:03Z","https://github.com/nuxt/nuxt/issues/19161",0.62841606,{"description":3206,"labels":3207,"number":3210,"owner":3144,"repository":3144,"state":3161,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.0\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-z1urrw?file=app.vue\n\n### Describe the bug\n\nIf a hydoration text content mismatch occurs, a warning message is displayed on browser console.\r\nHowever a client value and a server value are swapped.\r\n\r\nFor example:\r\n```javascript\r\nconst x = ref(0);\r\n\r\nif (process.client) {\r\n x.value = 1;\r\n}\r\n```\r\n\r\nDisplayed message:\r\n```\r\nvue.js:1449 [Vue warn]: Hydration text content mismatch in \u003Cdiv>:\r\n- Client: 0\r\n- Server: 1 \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3208,3209],{"name":3155,"color":3156},{"name":3158,"color":3159},22931,"Confusing message about a Hydration text content mismatch","2023-08-31T14:09:18Z","https://github.com/nuxt/nuxt/issues/22931",0.6318059,{"description":3216,"labels":3217,"number":3220,"owner":3144,"repository":3144,"state":3161,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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",[3218,3219],{"name":3155,"color":3156},{"name":3158,"color":3159},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.6325089,{"labels":3226,"number":3229,"owner":3144,"repository":3144,"state":3161,"title":3230,"updated_at":3231,"url":3232,"score":3233},[3227,3228],{"name":3155,"color":3156},{"name":3158,"color":3159},13487,"JSX Hydration text mismatch","2023-01-19T18:20:11Z","https://github.com/nuxt/nuxt/issues/13487",0.6328415,{"description":3235,"labels":3236,"number":3239,"owner":3144,"repository":3144,"state":3161,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### 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",[3237,3238],{"name":3155,"color":3156},{"name":3158,"color":3159},23572,"Hydration node mismatch","2023-10-08T14:43:58Z","https://github.com/nuxt/nuxt/issues/23572",0.6384166,["Reactive",3245],{},["Set"],["ShallowReactive",3248],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjAdjR8Ixph6c1yow1i8NQ_0ovTMSFrT_3FrP_br0Zho":-1},"/nuxt/ui/2976"]