\n \u003CTeleport defer to=\"main\">\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/Teleport>\n \u003C/div>\n\u003C/template>\n```\n\n### Describe the bug\n\nUsing the \u003CNuxtLayout> component within a deferred Teleport consistently throws the following warning in the console:\n\n```\n WARN [nuxt] Your project has pages but the \u003CNuxtPage /> component has not been used. You might be using the \u003CRouterView /> component instead, which will not work correctly in Nuxt. You can set pages: false in nuxt.config if you do not wish to use the Nuxt vue-router integration.\n```\n\nThis does not occur if the Teleport is not deferred, but I need to defer it for my use case. It also does not occur if `ssr: false` is specified, so I assume the `app:rendered` and `app:suspense:resolve` hooks are probably [relevant](https://github.com/nuxt/nuxt/blob/edc299a04344897ac110aca3b3a2c2705b0cef35/packages/nuxt/src/pages/runtime/plugins/check-if-page-unused.ts#L22). \n\nVue lets me suppress the inevitable hydration mismatch warning with `\u003Cmain data-allow-mismatch=\"children\" />`, but Nuxt does not let me suppress the warning, so it clutters the console.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2865,2868],{"name":2866,"color":2867},"pending triage","E99695",{"name":2869,"color":2870},"dx","C39D69",30001,"nuxt","open","\u003CNuxtLayout> within \u003CTeleport defer> throws warning: \"Your project has pages but the \u003CNuxtPage /> component is not being used\"","2024-11-27T15:13:13Z","https://github.com/nuxt/nuxt/issues/30001",0.6487719,{"description":2879,"labels":2880,"number":2882,"owner":2872,"repository":2872,"state":2873,"title":2883,"updated_at":2884,"url":2885,"score":2886},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `bun@1.2.15`\n- Builder: `-`\n- User Config: `modules`, `site`, `seo`, `sitemap`, `robots`, `linkChecker`, `ogImage`, `ui`, `image`, `icon`, `eslint`, `css`, `routeRules`, `router`, `pages`, `imports`, `components`, `devServer`, `devtools`, `compatibilityDate`, `vite`, `future`, `experimental`\n- Runtime Modules: `@nuxt/ui@3.1.3`, `@nuxt/icon@1.13.0`, `@nuxtjs/seo@3.0.3`, `@nuxt/image@1.10.0`, `@nuxt/eslint@1.4.1`, `@nuxt/test-utils@3.19.1`, `@formkit/auto-animate/nuxt@0.8.2`\n- Build Modules: `-`\n\n\n### Reproduction\n\n[Minimal reproduction](https://stackblitz.com/edit/github-nwjb761b)\n\n### Describe the bug\n\nInside a regular Vue component (e.g., _app/components/header/TheHeader.vue_), there's a NuxtUI component like this:\n```html\n\u003Ctemplate>\n \u003CUChip>\n \u003CUButton icon=\"i-lucide-mail\" color=\"neutral\" variant=\"subtle\" />\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.",[2881],{"name":2866,"color":2867},32251,"Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.64942384,{"description":2888,"labels":2889,"number":2894,"owner":2872,"repository":2872,"state":2895,"title":2896,"updated_at":2897,"url":2898,"score":2899},"### 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_",[2890,2893],{"name":2891,"color":2892},"3.x","29bc7f",{"name":2866,"color":2867},21385,"closed","Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.6101502,{"description":2901,"labels":2902,"number":2910,"owner":2872,"repository":2872,"state":2895,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Environment\n\nNuxt 3.2.3\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-wci4ux-z14zkz?file=layouts%2Flayout01.vue,pages%2Findex.vue,pages%2Fpage2.vue,layouts%2Fdefault.vue,middleware%2F1_set_default_layout.global.ts,app.config.ts,layouts%2FcustomDefaultLayout.vue,nuxt.config.ts\n\n### Describe the bug\n\nAccording to the docs we can set the layout by calling setPageLayout inside a middleware.\r\nhttps://nuxt.com/docs/api/utils/set-page-layout#setpagelayout\r\n\r\nOn SSR that works fine, but on client-side rendering we get a warning, although it's called from a middleware:\r\n```\r\n[warn] [nuxt] `setPageLayout` should not be called to change the layout during hydration as this will cause hydration errors. \r\n```\r\n\r\n\r\n\n\n### Additional context\n\nOpen the stackblitz, re-load the homepage and check the browser console.\n\n### Logs\n\n_No response_",[2903,2904,2907],{"name":2891,"color":2892},{"name":2905,"color":2906},"bug","d73a4a",{"name":2908,"color":2909},"🔨 p3-minor","FBCA04",19428,"setPageLayout Middleware on client side rendering","2023-03-03T16:47:10Z","https://github.com/nuxt/nuxt/issues/19428",0.6191325,{"description":2916,"labels":2917,"number":2920,"owner":2872,"repository":2872,"state":2895,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v17.3.0`\r\n- Nuxt Version: `3.1.2`\r\n- Nitro Version: `2.1.2`\r\n- Package Manager: `npm@8.13.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://github.com/jhd4tmr/bug\n\n### Describe the bug\n\nWhen combined using ```useState``` in ```Component``` in ```layout```, nuxt respond a warning. The server side did not create the component when ```v-if=\"true\"``` in the page in this case.\r\n```\r\nruntime-core.esm-bundler.js:40 [Vue warn]: Hydration node mismatch:\r\n- Client vnode: div \r\n- Server rendered DOM: \u003C!----> \r\n at \u003CTest> \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### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2918,2919],{"name":2891,"color":2892},{"name":2866,"color":2867},18912,"useState + component + layout create hydration node mismatch","2024-04-30T09:12:44Z","https://github.com/nuxt/nuxt/issues/18912",0.6241655,{"description":2926,"labels":2927,"number":2930,"owner":2872,"repository":2872,"state":2895,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### 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",[2928,2929],{"name":2891,"color":2892},{"name":2866,"color":2867},18511,"Using defineNuxtComponent and components:false causes hydration mismatches error","2023-01-26T00:37:25Z","https://github.com/nuxt/nuxt/issues/18511",0.6391153,{"description":2936,"labels":2937,"number":2940,"owner":2872,"repository":2872,"state":2895,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Environment\n\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: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-uy1uwl?file=app.vue\n\n### Describe the bug\n\nAccording to the docs, server-side rendered `.server` components are replaced with their `.client` counterparts on the client-side. Unfortunately, this isn't working as expected and Vue throws an `Hydration node mismatch` warning even though both files contain the same template without any state dependent dynamic content.\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Ch1>Hello World!\u003C/h1>\r\n\u003C/template>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: div \r\n- Server rendered DOM: \u003Ch1>Hello World!\u003C/h1> \r\n at \u003CHeadline.client> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[2938,2939],{"name":2905,"color":2906},{"name":2908,"color":2909},15562,"Hydration node mismatch with `.server`/`.client` components","2025-03-24T22:47:45Z","https://github.com/nuxt/nuxt/issues/15562",0.639227,{"description":2946,"labels":2947,"number":2951,"owner":2872,"repository":2872,"state":2895,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.5.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: `npm@10.2.4`\r\n- Builder: `-`\r\n- User Config: `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\nBut I believe this bug happens in all environments.\r\n\r\n### Reproduction\r\n\r\nOriginal reproduction by @robert-gruner\r\nhttps://stackblitz.com/~/edit/github-wgg4gm-sdfzwd\r\n\r\nMinimal reproduction by me\r\nhttps://stackblitz.com/edit/github-wgg4gm-8hhehw\r\n\r\n### Describe the bug\r\n\r\nThis issue is an edge case which was not tested in #25490.\r\n\r\nWith the `content.global.ts`, which dynamically changes layout, the warning message is always shown.\r\nWithout the middleware (i.e. without calling `setPageLayout`), the warning message is shown expectedly.\r\n\r\n### Additional context\r\n\r\nThis issue and the reproduction were originally reported by @robert-gruner as https://github.com/nuxt/nuxt/pull/25490#issuecomment-1925902990.\r\n\r\n### Logs\r\n\r\n_No response_",[2948,2949,2950],{"name":2891,"color":2892},{"name":2866,"color":2867},{"name":2869,"color":2870},25617,"Warning for `NuxtPage` absence is always shown if `setPageLayout` is called in middleware","2024-02-05T13:51:26Z","https://github.com/nuxt/nuxt/issues/25617",0.63995016,{"description":2957,"labels":2958,"number":2964,"owner":2872,"repository":2872,"state":2895,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### 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_",[2959,2960,2961],{"name":2891,"color":2892},{"name":2866,"color":2867},{"name":2962,"color":2963},"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.6436545,{"labels":2970,"number":2978,"owner":2872,"repository":2872,"state":2895,"title":2979,"updated_at":2980,"url":2981,"score":2982},[2971,2974,2975],{"name":2972,"color":2973},"documentation","5319e7",{"name":2891,"color":2892},{"name":2976,"color":2977},"⛔️ can be closed","484893",13326,"Add hydration caveats section","2023-02-07T09:54:51Z","https://github.com/nuxt/nuxt/issues/13326",0.64518553,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fexAetLB1KseQBbzpWXo9Rc0sw-i-IvbYth3lvuvFs7E":-1},"/nuxt/nuxt/15297"]