\r\n\t\t\u003C/div>\r\n\t\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nError:\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_",[3059,3060,3061],{"name":3035,"color":3036},{"name":3049,"color":3050},{"name":3062,"color":3063},"needs reproduction","FBCA04",15458,"Hydration completed but contains mismatches.","2023-01-19T17:50:47Z","https://github.com/nuxt/nuxt/issues/15458",0.6076013,{"description":3070,"labels":3071,"number":3074,"owner":3021,"repository":3021,"state":3022,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### 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_",[3072,3073],{"name":3035,"color":3036},{"name":3049,"color":3050},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.6083875,{"description":3080,"labels":3081,"number":3084,"owner":3021,"repository":3021,"state":3022,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.0\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.0\r\n- Package Manager: yarn@1.22.10\r\n- Builder: -\r\n- User Config: devServer, modules, runtimeConfig, app, nitro, extends, devtools, build\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.8.0, @nuxtjs/apollo@5.0.0-alpha.7\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nGo to:\r\nhttps://stackblitz.com/edit/nuxt-starter-yamb8r?file=pages%2Findex.vue\r\n\r\nand refresh the browser window.\r\n\r\n### Describe the bug\r\n\r\nCurrently we are running to an issue for a production application where we are getting a \r\n```\r\nchunk-JGO4W4UR.js:1708 [Vue warn]: Hydration text content mismatch in \u003Cdiv>:\r\n- Client: value set\r\n- Server: == to set == \r\n at \u003CHydrationError onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n (...)\r\n```\r\nIn the app in question, doing a top level await will remove the errors, but it becomes render blocking during client side navigation, making it unfeasible. I looked at a few other issues \r\n- https://github.com/nuxt/nuxt/issues/23590 \r\n\r\nfor example, but found the answer was not sufficiently addressing our issue (wrapping the content in a `\u003Cdiv>` had no effect). I am currently only getting this when I use `useAsyncData`, so I do believe it is a nuxt bug.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3082,3083],{"name":3035,"color":3036},{"name":3049,"color":3050},24042,"Hydration Mismatch when useAsyncData is not awaited","2023-10-30T21:11:38Z","https://github.com/nuxt/nuxt/issues/24042",0.6222441,{"labels":3090,"number":3096,"owner":3021,"repository":3021,"state":3022,"title":3097,"updated_at":3098,"url":3099,"score":3100},[3091,3092,3093],{"name":3035,"color":3036},{"name":3038,"color":3039},{"name":3094,"color":3095},"nitro","bfd4f2",14504,"CF Workers: Hydration completed but contains mismatches. `entry.mjs`","2023-01-19T17:39:21Z","https://github.com/nuxt/nuxt/issues/14504",0.6224445,{"description":3102,"labels":3103,"number":3105,"owner":3021,"repository":3021,"state":3022,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### 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```",[3104],{"name":3049,"color":3050},31228,"Hydration mismatch when navigating with middleware","2025-03-12T22:56:19Z","https://github.com/nuxt/nuxt/issues/31228",0.6255001,{"description":3111,"labels":3112,"number":3118,"owner":3021,"repository":3021,"state":3022,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Environment\r\n\r\n\"nuxt\": \"^3.9.0\"\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/devbox/intelligent-kepler-lv49z8?file=%2Fapp.vue%3A11%2C36\r\n\r\nIt doesn't happen on stackblitz, but it happens locally and on codesandbox.\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { NuxtLink } from '#components';\r\n\r\nconst disabled = ref(false);\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ccomponent :is=\"NuxtLink\" :disabled=\"disabled\" href=\"https://www.google.com\">\r\n test\r\n \u003C/component>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Describe the bug\r\n\r\nIt looks like there's a problem with server-side rendering, it shouldn't render `disabled=\"\"`\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Hydration attribute mismatch on \u003Ca href=\"https://www.google.com\" rel=\"noopener noreferrer\"> t \u003C/a> \r\n - rendered on server: disabled=\"\"\r\n - expected on client: (not rendered)\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CNuxtLink disabled=false href=\"https://www.google.com\" > \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n",[3113,3114,3115],{"name":3035,"color":3036},{"name":3049,"color":3050},{"name":3116,"color":3117},"upstream","E8A36D",25154,"Unexpected hydration attribute mismatch, with a ref bool attribute ","2024-01-14T14:16:36Z","https://github.com/nuxt/nuxt/issues/25154",0.6256254,["Reactive",3124],{},["Set"],["ShallowReactive",3127],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPE8pAO3N4Nx3WsgaP2RXmLh8DLzKemrcLmfmSMAzWzc":-1},"/nuxt/nuxt/12236"]