\n \u003C/UChip>\n\u003C/template>\n```\n\nEven though the component is a copy-paste off of [ui.nuxt.com](), it immediately causes hydration mismatches, which I experienced with pretty much every other NuxtUI component. It took me some time to figure out that the error disappeared once I changed the value of `selectiveClient` from `'deep'` to `true` in _nuxt.config.ts_ – basically disabling slots in client components, [as mentioned in the documentation](https://nuxt.com/docs/guide/directory-structure/components#client-components-within-server-components:~:text=This%20only%20works,once%20client%2Dside.).\n```ts\nexport default defineNuxtConfig({\n experimental: {\n componentIslands: {\n selectiveClient: 'deep', // Changing this to `true` prevents hydration mismatches.\n },\n },\n});\n```\n\n\u003Cbr />\n\nI decided to file this as a Nuxt issue instead of a NuxtUI issue since it's literally based on the experimental Nuxt config and may happen with components other than those from NuxtUI.",[2906],{"name":2907,"color":2908},"pending triage","E99695",32251,"nuxt","open","Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.63900125,{"description":2917,"labels":2918,"number":2923,"owner":2910,"repository":2910,"state":2924,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Environment\n\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/onresponse-hydration-node-mismatch-h3rt2d\r\n\r\nBasically a code like this can reproduce the issue:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst showFallback = ref(true);\r\n\r\nconst { data } = await useFetch\u003C{ message: string }>(\"/api/hello\", {\r\n onResponse({ response }) {\r\n showFallback.value = !response.ok || !response._data?.message;\r\n },\r\n});\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>showFallback: {{ showFallback }}\u003C/div>\r\n \u003Cdiv v-if=\"showFallback\">data: fallback value\u003C/div>\r\n \u003Cdiv v-else>data: {{ data }}\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n```\r\n\r\nOf course this is just a minimal reproduction. I can use the `status` property but I can't think of a good example.\n\n### Describe the bug\n\nupdating a `ref` via `onResponse` of `useFetch` causes hydration node mismatch because it isn't called on client since the data is already available.\r\n\r\nI'm wondering if calling `onResponse` even on client side is safe enough to do to fix this.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration text content mismatch on HTMLDivElement \r\n - rendered on server: showFallback: false\r\n - expected on client: showFallback: true \r\n\r\n[Vue warn]: Hydration text content mismatch on HTMLDivElement \r\n - rendered on server: data: {\r\n \"message\": \"hello\"\r\n}\r\n - expected on client: data: fallback value\n```\n",[2919,2922],{"name":2920,"color":2921},"3.x","29bc7f",{"name":2907,"color":2908},25871,"closed","hydration node mismatch when updating ref via onResponse","2024-02-19T19:59:35Z","https://github.com/nuxt/nuxt/issues/25871",0.6307733,{"labels":2930,"number":2933,"owner":2910,"repository":2910,"state":2924,"title":2934,"updated_at":2935,"url":2936,"score":2937},[2931,2932],{"name":2920,"color":2921},{"name":2907,"color":2908},13431,"Throw \"Hydration node mismatch\" error when using teleport","2023-01-19T16:55:42Z","https://github.com/nuxt/nuxt/issues/13431",0.63301986,{"description":2939,"labels":2940,"number":2943,"owner":2910,"repository":2910,"state":2924,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.1.0\r\n- Nitro Version: 2.0.0\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: components\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-ffmmnf?file=package.json\n\n### Describe the bug\n\nWhen using `defineNuxtComponent` and `components: false` manually causes Hydration error like above reproduction.\r\nThis error doesn't appear at 3.0.0.\r\n\r\n```vue\r\n// e.g. layout\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n layout\r\n \u003CFoo />\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",[2941,2942],{"name":2920,"color":2921},{"name":2907,"color":2908},18511,"Using defineNuxtComponent and components:false causes hydration mismatches error","2023-01-26T00:37:25Z","https://github.com/nuxt/nuxt/issues/18511",0.6351085,{"description":2949,"labels":2950,"number":2953,"owner":2910,"repository":2910,"state":2924,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.4.2\r\n- Nitro Version: 2.3.3\r\n- Package Manager: npm@8.6.0\r\n- Builder: vite\r\n- User Config: meta, routeRules, runtimeConfig, pages, css, components, modules, content, i18n\r\n- Runtime Modules: @nuxt/content@2.6.0, @nuxtjs/i18n@8.0.0-beta.11\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nA minimal reproduction is not possible because it requires to update the repo to reproduce.\r\n\r\n### Describe the bug\r\n\r\nWhen developing, every time I make a change, the preview reloads showing a fake `[Vue warn]: Hydration text mismatch`\r\n\r\nIf I stop `nuxi dev`, delete the `/.nuxt` folder and restart `nuxi dev`, the warning disappears. Delete `/.nuxt` is not always necessary, but it is necessary to restart `nuxi dev`.\r\n\r\nWhat I'm actually doing is to ignore the warning and restart as described, before `git commit`, to make sure the warning is fake.\r\n\r\nIt seems to me that the Client is showing as rendering the previous version (before saving the change) and the Server the new one.\r\n\r\nIs this the expected behavior? If so, it's really inconvenient. \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 text mismatch:\r\n- Client: \"\u003COMITTED>\"\r\n- Server: \"blog\" \r\n at \u003CNuxtLink to=\"\u003COMITTED>\" > \r\n at \u003CMerchantProfile title=\"\u003COMITTED>\" description=\"\u003COMITTED>\" image=\"me.jpg\" ... > \r\n at \u003CBody> \r\n at \u003CHtml lang=\"en-US\" dir=\"ltr\" > \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 \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CFragmentWrapper > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n```\r\n",[2951,2952],{"name":2920,"color":2921},{"name":2907,"color":2908},20437,"Fake [Vue warn]: Hydration text mismatch with nuxi dev","2023-05-12T16:25:05Z","https://github.com/nuxt/nuxt/issues/20437",0.6364449,{"description":2959,"labels":2960,"number":2966,"owner":2910,"repository":2910,"state":2924,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.7.0\r\n- Nuxt Version: 3.7.3\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nHere is a reporduction version of this issue: https://stackblitz.com/edit/nuxt-starter-nufrzf?file=components%2FDynamicStyle.vue,app.vue\r\nPlease note that issues like this don't visually show in Stackblitz. You need to run it locally.\r\n\r\nHere is an example from Vue with vite where it doesnt happen: https://stackblitz.com/edit/vitejs-vite-zcf5i1?file=src%2Fcomponents%2FDynamicStyle.vue,src%2FApp.vue&terminal=dev\n\n### Describe the bug\n\nWhen using `\u003Ccomponent :is=\"'style'\" type=\"text/css\">` with named slots, a \"Hydration text mismatch\" happens. This seems to not happen when running vue with vite, but I am not 100% sure that this isn't something downstream.\n\n### Additional context\n\nI have a solution for my specific use-case: https://gist.github.com/SebbeJohansson/c76ecfcc019c11cda6e3abfa2e946efa\r\nKinda nasty, but it works.\n\n### Logs\n\n```shell-script\nvue.js:1449 [Vue warn]: Hydration text mismatch:\r\n- Client: \" @media (max-width: 767px){ /* mobile */ \u003C!--[--> .text-image-block__column { grid-column: span 1; } \u003C!--]--> } @media (min-width: 768px) and (max-width: 1023px) { /* tablet */ \u003C!--[--> .text-image-block__column { grid-column: span 2; } \u003C!--]--> } @media (min-width: 1024px){ /* desktop */ \u003C!--[--> .text-image-block__column { grid-column: span 2; } \u003C!--]--> } \"\r\n- Server: \" @media (max-width: 767px){ /* mobile */ \" \r\n at \u003CDynamicStyle> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\nwarn2 @ vue.js:1449\r\nhydrateNode @ vue.js:5957\r\nhydrateChildren @ vue.js:6180\r\nhydrateElement @ vue.js:6136\r\nhydrateNode @ vue.js:6014\r\nhydrateChildren @ vue.js:6180\r\nhydrateElement @ vue.js:6136\r\nhydrateNode @ vue.js:6014\r\nhydrateSubTree @ vue.js:7073\r\ncomponentUpdateFn @ vue.js:7093\r\nrun @ vue.js:423\r\ninstance.update @ vue.js:7212\r\nsetupRenderEffect @ vue.js:7220\r\nmountComponent @ vue.js:7010\r\nhydrateNode @ vue.js:6026\r\nhydrateChildren @ vue.js:6180\r\nhydrateElement @ vue.js:6136\r\nhydrateNode @ vue.js:6014\r\nhydrateSubTree @ vue.js:7073\r\ncomponentUpdateFn @ vue.js:7093\r\nrun @ vue.js:423\r\ninstance.update @ vue.js:7212\r\nsetupRenderEffect @ vue.js:7220\r\nmountComponent @ vue.js:7010\r\nhydrateNode @ vue.js:6026\r\nhydrateSuspense @ vue.js:2953\r\nhydrateNode @ vue.js:6066\r\nhydrateSubTree @ vue.js:7073\r\ncomponentUpdateFn @ vue.js:7093\r\nrun @ vue.js:423\r\ninstance.update @ vue.js:7212\r\nsetupRenderEffect @ vue.js:7220\r\nmountComponent @ vue.js:7010\r\nhydrateNode @ vue.js:6026\r\nhydrate2 @ vue.js:5920\r\nmount @ vue.js:5213\r\napp.mount @ vue.js:10556\r\ninitApp @ null:55\r\nawait in initApp (async)\r\n(anonymous) @ null:64\r\nvue.js:1449 [Vue warn]: Hydration children mismatch in \u003Cstyle>: server rendered element contains fewer child nodes than client vdom. \r\n at \u003CDynamicStyle> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[2961,2962,2963],{"name":2920,"color":2921},{"name":2907,"color":2908},{"name":2964,"color":2965},"upstream","E8A36D",23323,"Using \u003Ccomponent :is=\"'style'\" type=\"text/css\"> with slots produces hydration missmatch only in nuxt3 (vue+vite works fine)","2023-09-26T14:31:12Z","https://github.com/nuxt/nuxt/issues/23323",0.6369011,{"description":2972,"labels":2973,"number":2975,"owner":2910,"repository":2910,"state":2924,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### 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```",[2974],{"name":2907,"color":2908},31228,"Hydration mismatch when navigating with middleware","2025-03-12T22:56:19Z","https://github.com/nuxt/nuxt/issues/31228",0.6394546,{"description":2981,"labels":2982,"number":2985,"owner":2910,"repository":2910,"state":2924,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: modules, devtools, app, vite, vue, css, postcss, nitro, build, typescript, runtimeConfig\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.2, @pinia/nuxt@0.5.1, @formkit/auto-animate/nuxt@0.8.1, nuxt-headlessui@1.1.5, nuxt-icon@0.6.8\r\n- Build Modules: -\r\n- latest firefox & chromium\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-pgrig4?file=app.vue\n\n### Describe the bug\n\nUsing v-bind together with style attribute on component root gives ```Hydration style mismatch``` warning:\r\n```\r\n- rendered on server: style=\"padding:100px;--938b83b0-test:100;--938b83b0-test2:red;\"\r\n- expected on client: style=\"padding:100px;\"\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2983,2984],{"name":2920,"color":2921},{"name":2907,"color":2908},25588,"Hydration style mismatch: v-bind and style attribute on component root","2024-02-02T10:24:04Z","https://github.com/nuxt/nuxt/issues/25588",0.64212143,{"description":2991,"labels":2992,"number":2995,"owner":2910,"repository":2910,"state":2924,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: buildModules, plugins\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nNuxt : https://stackblitz.com/edit/github-9ukebr-n5eon6?file=package.json\r\n\r\nVue : https://stackblitz.com/edit/github-iswjxq-hto8un?file=src%2Fmain.ts,src%2FApp.vue\n\n### Describe the bug\n\nHi,\r\n\r\nI tried to create a directive who add a class to an element but I have this warning : \r\n```\r\nHydration class mismatch on \u003Cdiv class=\"test b-red\" data-v-inspector=\"pages/index.vue:2:3\">Hello World!\u003C/div> \r\n - rendered on server: class=\"test b-red\"\r\n - expected on client: class=\"test\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n```\r\n\r\nI have done the reproduction on Vue and Nuxt, because I do not have this error on Vue (only in Nuxt).\r\n\r\nTo see this error, you need to open the console, do not only look on StackBlitz terminal.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration class mismatch on \r\n \u003Cdiv class=\"test b-red\" data-v-inspector=\"pages/index.vue:2:3\">Hello World!\u003C/div>\r\n - rendered on server: class=\"test b-red\"\r\n - expected on client: class=\"test\"\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 \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" vnode= \r\n{__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}\r\n route= \r\n{fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}\r\n ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CElMain> \r\n at \u003CElContainer> \r\n at \u003CElContainer> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= \r\n{ref: RefImpl}\r\n name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= \r\n{ref: RefImpl}\r\n key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=4 > \r\n at \u003CNuxtRoot>\n```\n",[2993,2994],{"name":2920,"color":2921},{"name":2907,"color":2908},27664,"Directive Custom | Hydration error when adding a class","2024-06-17T14:36:14Z","https://github.com/nuxt/nuxt/issues/27664",0.6421991,{"description":3001,"labels":3002,"number":3008,"owner":2910,"repository":2910,"state":2924,"title":3009,"updated_at":3010,"url":3011,"score":3012},"### Environment\r\n\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.19.0`\r\n- Nuxt Version: `3.1.2`\r\n- Nitro Version: `2.1.1`\r\n- Package Manager: `yarn@3.4.1`\r\n- Builder: `vite`\r\n- User Config: `modules`\r\n- Runtime Modules: `nuxt-icon@0.2.10`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-dgdjfn-hhmxav?file=pages%2Findex%2Fposts.vue,nuxt.config.ts,pages%2Findex.vue\r\n\r\n### Describe the bug\r\n- After upgrade to 3.1.2 from 3.0.0, any content change makes `hydration mismatch` error.\r\n\r\n### pages/index\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n aaa\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n\u003C/script>\r\n\r\n\u003Cstyle scoped>\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n- Start nuxt\r\n- Open page `http://localhost:3000`\r\n- Change template content (e.g. \"aaa\" to \"bbb\")\r\n - (Any change of content makes Hydration node mismatch error)\r\n- Refresh page `http://localhost:3000`\r\n- See console.\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[3003,3004,3005],{"name":2920,"color":2921},{"name":2907,"color":2908},{"name":3006,"color":3007},"windows","C681FD",18764,"Any change of content makes hydration node/text content mismatch","2023-02-21T07:37:04Z","https://github.com/nuxt/nuxt/issues/18764",0.6438575,["Reactive",3014],{},["Set"],["ShallowReactive",3017],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAW5CqrPQOLfPrQfCVm1qNNMzDHea_k-4sGCj0PAsZBE":-1},"/nuxt/nuxt/26483"]