\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```",[3020,3023],{"name":3021,"color":3022},"pending triage","E99695",{"name":3024,"color":3025},"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":3034,"labels":3035,"number":3037,"owner":3027,"repository":3027,"state":3028,"title":3038,"updated_at":3039,"url":3040,"score":3041},"### 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.",[3036],{"name":3021,"color":3022},32251,"Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.6494239,{"description":3043,"labels":3044,"number":3049,"owner":3027,"repository":3027,"state":3050,"title":3051,"updated_at":3052,"url":3053,"score":3054},"### 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_",[3045,3048],{"name":3046,"color":3047},"3.x","29bc7f",{"name":3021,"color":3022},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":3056,"labels":3057,"number":3065,"owner":3027,"repository":3027,"state":3050,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### 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_",[3058,3059,3062],{"name":3046,"color":3047},{"name":3060,"color":3061},"bug","d73a4a",{"name":3063,"color":3064},"🔨 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":3071,"labels":3072,"number":3075,"owner":3027,"repository":3027,"state":3050,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### 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_",[3073,3074],{"name":3046,"color":3047},{"name":3021,"color":3022},18912,"useState + component + layout create hydration node mismatch","2024-04-30T09:12:44Z","https://github.com/nuxt/nuxt/issues/18912",0.6241655,{"description":3081,"labels":3082,"number":3085,"owner":3027,"repository":3027,"state":3050,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### 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",[3083,3084],{"name":3046,"color":3047},{"name":3021,"color":3022},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":3091,"labels":3092,"number":3095,"owner":3027,"repository":3027,"state":3050,"title":3096,"updated_at":3097,"url":3098,"score":3099},"### 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",[3093,3094],{"name":3060,"color":3061},{"name":3063,"color":3064},15562,"Hydration node mismatch with `.server`/`.client` components","2025-03-24T22:47:45Z","https://github.com/nuxt/nuxt/issues/15562",0.639227,{"description":3101,"labels":3102,"number":3106,"owner":3027,"repository":3027,"state":3050,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### 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_",[3103,3104,3105],{"name":3046,"color":3047},{"name":3021,"color":3022},{"name":3024,"color":3025},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":3112,"labels":3113,"number":3119,"owner":3027,"repository":3027,"state":3050,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### 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_",[3114,3115,3116],{"name":3046,"color":3047},{"name":3021,"color":3022},{"name":3117,"color":3118},"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":3125,"number":3133,"owner":3027,"repository":3027,"state":3050,"title":3134,"updated_at":3135,"url":3136,"score":3137},[3126,3129,3130],{"name":3127,"color":3128},"documentation","5319e7",{"name":3046,"color":3047},{"name":3131,"color":3132},"⛔️ can be closed","484893",13326,"Add hydration caveats section","2023-02-07T09:54:51Z","https://github.com/nuxt/nuxt/issues/13326",0.64518553,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fexAetLB1KseQBbzpWXo9Rc0sw-i-IvbYth3lvuvFs7E":-1},"/nuxt/nuxt/15297"]