\r\n \u003Ctemplate #error=\"{ error }\">\r\n \u003Cp>An error occurred: {{ error }}\u003C/p>\r\n \u003Cbutton @click=\"() => clearError({ redirect: '/' })\">\r\n This will clear the error.\r\n \u003C/button>\r\n \u003C/template>\r\n \u003C/NuxtErrorBoundary>\r\n\u003C/template>\r\n```\r\n\r\n**Problem 1:**\r\n\r\nThe error is **NOT** cleared at all when the button is clicked. The error message still can be seen on the screen.\r\n\r\n**Problem 2:**\r\n\r\nThe Home page is **NOT** rendered at all when the route is redirected to `/` successfully. It is still rendering the error component and message.\r\n\r\nAny ideas? ",[2865,2868],{"name":2866,"color":2867},"bug","d73a4a",{"name":2869,"color":2870},"🔨 p3-minor","FBCA04",15781,"nuxt","open","Bug: Handling errors with the NuxtErrorBoundary component","2024-12-28T01:48:12Z","https://github.com/nuxt/nuxt/issues/15781",0.64964736,{"description":2879,"labels":2880,"number":2889,"owner":2872,"repository":2872,"state":2890,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `npm@8.12.1`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-kmye2r?file=components%2FTestThing.vue,components%2FTestThing2.vue,app.vue\n\n### Describe the bug\n\nWhen using a ClientOnly component with a fallback templates, as described in the docs, you will always get hydration errors.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2881,2884,2887,2888],{"name":2882,"color":2883},"3.x","29bc7f",{"name":2885,"color":2886},"workaround available","11376d",{"name":2866,"color":2867},{"name":2869,"color":2870},14896,"closed","`\u003CClientOnly>` with `\u003Ctemplate #fallback>` always results in hydration error in RC10","2025-02-16T18:21:08Z","https://github.com/nuxt/nuxt/issues/14896",0.62901664,{"description":2896,"labels":2897,"number":2898,"owner":2872,"repository":2872,"state":2890,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### Discussed in https://github.com/nuxt/nuxt/discussions/16736\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **xiangnanscu** September 28, 2022\u003C/sup>\r\nI press th Submit button to throw an error in client, but nothing shows up, including the console.\r\n```vue\r\npages/login.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtErrorBoundary @error=\"someErrorLogger\">\r\n \u003C!-- You use the default slot to render your content -->\r\n \u003Ctemplate #error=\"{ error }\">\r\n You can display the error locally here.\r\n \u003Cbutton @click=\"error = null\">This will clear the error.\u003C/button>\r\n \u003C/template>\r\n \u003C/NuxtErrorBoundary>\r\n \u003Cx-button @click.prevent=\"sendCredentials\">Submit\u003C/x-button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nfunction someErrorLogger(event) {\r\n console.log('error happend:', { event });\r\n}\r\nasync function sendCredentials(event) {\r\n throw createError({ statusCode: 404, statusMessage: \"Page Not Found\" });\r\n}\r\n\u003C/script>\r\n\r\n```\r\n\u003C/div>",[],20222,"What's the right way to use NuxtErrorBoundary?","2023-04-12T08:11:24Z","https://github.com/nuxt/nuxt/issues/20222",0.6490666,{"description":2904,"labels":2905,"number":2911,"owner":2872,"repository":2872,"state":2890,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Environment\n\n```\n- Operating System: Linux\n- Node Version: v22.5.1\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: modules, site, runtimeConfig, app, devtools, css, future, compatibilityDate, eslint, openFetch, fonts, colorMode, components\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.12, @nuxt/eslint@1.0.1, @nuxt/test-utils/module@3.15.4, @nuxtjs/seo@2.1.1, @nuxt/scripts@0.9.5, @formkit/auto-animate/nuxt@0.8.2, nuxt-open-fetch@0.9.5, @nuxt/image@1.9.0\n- Build Modules: -\n```\n\nBut based on my tests I can reproduce this bug in pure nuxt.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-pej9nmvf?file=pages%2Ferror-server.server.vue\n\nIt has `error-client.vue` - example of displaying error in normal page and `error-server.server.vue` - example that doesn't work\n\n### Describe the bug\n\nUsing [`showError`](https://nuxt.com/docs/api/utils/show-error) or [`throw createError`](https://nuxt.com/docs/api/utils/create-error) doesn't properly work in Nuxt's server components (or just pages). Instead of properly displaying `error.vue` page, I get `hydration error`.\n\nI'm not sure if this is a bug or just a missing feature, but I couldn't find any information about it.\n\n### Additional context\n\nThanks to @kubaryt for noticing this issue at first.\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration node mismatch:\n- rendered on server: \n\u003Cdiv>\n \u003Cempty string> \n- expected on client: Symbol(\"v-fgt\") \n at \u003CNuxtIsland name=\"page:error-server\" lazy=false ref=Ref\u003C null > ... > \n at \u003CErrorServer onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/error-server\" vnode= \nObject { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }\n route= \nObject { fullPath: \"/error-server\", hash: \"\", query: {}, name: \"error-server\", path: \"/error-server\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: \"/error-server\" }\n ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CApp key=4 > \n at \u003CNuxtRoot> runtime-core.esm-bundler.js:51:12\nHydration completed but contains mismatches.\n```",[2906,2909,2910],{"name":2907,"color":2908},"good first issue","fbca04",{"name":2866,"color":2867},{"name":2869,"color":2870},30938,"`showError` doesn't work properly in server pages/components","2025-03-01T07:40:13Z","https://github.com/nuxt/nuxt/issues/30938",0.65316314,{"description":2917,"labels":2918,"number":2923,"owner":2872,"repository":2872,"state":2890,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Describe the feature\n\nIf you use the current `\u003CNuxtErrorBoundary>` it will always render the `error`-slot on error, even if you do not provide a template to the slot. So if an error occurs inside the boundary, and no slot is provided, the component will just render a blank slot.\r\n\r\nWould it be smart to have an option to disable this, so that `\u003CNuxtErrorBoundary>` can be used to just catch the errors without doing any changes in the template? 😄 \n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2919,2920],{"name":2882,"color":2883},{"name":2921,"color":2922},"pending triage","E99695",19140,"Possible to render default slot in `\u003CNuxtErrorBoundary>` on error","2023-04-14T21:38:24Z","https://github.com/nuxt/nuxt/issues/19140",0.65936774,{"description":2929,"labels":2930,"number":2933,"owner":2872,"repository":2872,"state":2890,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Environment\n\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `npm@8.11.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-j4oicm?file=pages/index.vue\n\n### Describe the bug\n\n\r\nWhen Use fallback for clinet-only component , throw warning In browser console (when refresh the Page) \r\n\r\nmessage : Hydration node mismatch:\r\n- Client vnode: ...\r\n-----------------------\r\nbut if remove fallback , it's ok\r\n\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: Symbol(Fragment) \r\n- Server rendered DOM: \u003Cspan>\u003C/span> \r\n at \u003CClientOnly> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[2931,2932],{"name":2882,"color":2883},{"name":2921,"color":2922},14906," Hydration node mismatch When Use client-only fallback","2023-01-19T17:42:11Z","https://github.com/nuxt/nuxt/issues/14906",0.665908,{"description":2939,"labels":2940,"number":2945,"owner":2872,"repository":2872,"state":2890,"title":2946,"updated_at":2947,"url":2948,"score":2949},"Thank for the good work guys. We really enjoy using Nuxt In a lot of our web projects.\r\n\r\nShort description:\r\nIf components are used outside of the page scope (i.e. inside a layout) a component with a fetch method will miss it's data-fetch-key attribute in html coming from the server-side. That's why the client-side hydration will fail, resulting in an error. We are using some asynchronously fetched content inside the `\u003Cheader>` of the page. This `\u003Cheader>` is used inside the layout, not the page. This bug occurs only after updating from Nuxt 2.14.6 to 2.15.3! Everything was working fine before that. The exact error that we get is:\r\n**The client-side rendered virtual DOM tree is not matching server-rendered content.**\r\n\r\nThe error is caused because the VNodes are not matching some NodeList elements. These Nodes are generated based on asynchronously fetched data not the server side. The client doesn't receive this data. In the raw html markup the \"data-fetch-key\" is missing on the component that did the fetch. SO it triggers the fetch again on the client side, resulting in the same markup as coming from the server, but breaking the hydration.\r\n\r\nSome example code to (hopefully) reproduce the issue:\r\n\r\n**layouts/default.vue**\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cmain>\r\n\t\t\u003CFhHeader />\r\n\t\t\u003CNuxt />\r\n\t\t\u003CFhFooter />\r\n\t\u003C/main>\r\n\u003C/template>\r\n...\r\n```\r\n\r\n**components/FhHeader.vue**\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cheader>\r\n \t...\r\n\t\t\u003CFhSnippetMenu name=\"mainmenu\"/>\r\n \t ...\r\n\t\u003C/header>\r\n\u003C/template>\r\n...\r\n```\r\n\r\n**components/FhSnippetMenu.vue**\r\nThis is the component that fetches the data asynchronously\r\n```\r\n\u003Ctemplate>\r\n\t\u003CFhContent :items=\"items\">\u003C/FhContent>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n\texport default {\r\n\t\tname: 'FhSnippetMenu',\r\n\t\tprops: [\"name\"],\r\n\t\t\r\n\t\tdata () {\r\n\t\t\treturn {\r\n\t\t\t\titems: []\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\tasync fetch() {\r\n\t\t\tthis.items = (await this.$wagtail.menus.$name(this.name)).items;\r\n\t\t},\r\n\t\t...\r\n```\r\n\r\n**components/FhContent.vue**\r\nIt uses this component to render the list of content\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv class=\"fh-streamfield\">\r\n\t\t\u003Ctemplate v-for=\"(item, index) in items\">\r\n\t\t\t\u003Cspan> item.title\u003C/span>\r\n\t\t\u003C/template>\r\n\t\u003C/div>\r\n\u003C/template>\r\n\u003Cscript>\r\n\texport default {\r\n\t\tname: 'FhContent',\r\n\t\tprops: [\"items\"]\r\n\t}\r\n\u003C/script>\r\n...\r\n```\r\n\r\n### What is Expected?\r\n\r\nThe HTML markup that is rendered server side is looking correct. The component is populated with the dynamic content. Surprisingly when I move the `\u003CFhHeader/>` BELOW the `\u003CNuxt />` Component, everything is working fine! However, when I remove the `\u003CNuxt/>` component entirely from the default layout, the error occurs again. \r\n\r\nAnother thing I noticed is that when I wrap the `\u003CFhContent>` inside the FhSnippetMenu.vue component inside another wrapper div things are working fine and as expected! But this can obviously not be the proper solution...\r\n\r\n**components/FhSnippetMenu.vue**\r\nThis would work fine...\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv>\r\n\t\t\u003CFhContent :items=\"items\">\u003C/FhContent>\r\n\t\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nAny help would be much appreciated because I am dealing with this issue for 3 days now... Thank you in advance!\r\n",[2941,2942],{"name":2921,"color":2922},{"name":2943,"color":2944},"2.x","d4c5f9",9073,"Hydration of components with fetchHook in the layout scope will fail","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/9073",0.6659568,{"description":2951,"labels":2952,"number":2955,"owner":2872,"repository":2872,"state":2890,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### 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_",[2953,2954],{"name":2882,"color":2883},{"name":2921,"color":2922},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.6672645,{"description":2961,"labels":2962,"number":2969,"owner":2872,"repository":2872,"state":2890,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.15.0\r\n- Nuxt Version: 3.4.1\r\n- Nitro Version: 2.3.3\r\n- Package Manager: pnpm@8.1.1\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n- run `npx cross-env TEST_BUILDER=webpack pnpm nuxi build .\\test\\fixtures\\basic\\` on nuxt repo\r\n- run it there will be a hydration issue. VNode will not be mounted correctly\n\n### Describe the bug\n\nA silent bug (no warning or error in the console). When using wbpack as a builder, `NuxtClientFallback` has a strange behavior, mounting its DOM node without discarding the old nodes\n\n### Additional context\n\nfound with https://github.com/nuxt/nuxt/pull/20336\n\n### Logs\n\n_No response_",[2963,2964,2965,2968],{"name":2882,"color":2883},{"name":2866,"color":2867},{"name":2966,"color":2967},"webpack","650C6F",{"name":2869,"color":2870},20833,"NuxtClientFallback hydration broken in webpack build","2023-05-13T21:39:52Z","https://github.com/nuxt/nuxt/issues/20833",0.6683871,{"description":2975,"labels":2976,"number":2979,"owner":2872,"repository":2872,"state":2890,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.13.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.19\r\n- Builder: -\r\n- User Config: telemetry, devtools, ssr, typescript, components, modules, vite, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/image@1.0.0\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-m29wph?file=pages%2Findex.vue\n\n### Describe the bug\n\n## Description\r\n`NuxtErrorBoundary` component does not work properly under these conditions:\r\n\r\n- nuxt config: `ssr: false`\r\n- child component throws error in script setup\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>child component\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nthrow new Error('just a stupid error for reproduction purpose!');\r\n\u003C/script>\r\n```\r\n- child component is wrapped between `NuxtErrorBoundary` component in parent component\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n parent component\r\n\r\n \u003CNuxtErrorBoundary>\r\n \u003CChild />\r\n\r\n \u003Ctemplate #error=\"{error}\">\r\n error handled: {{ error }}\r\n \u003C/template>\r\n \u003C/NuxtErrorBoundary>\r\n \u003Cdiv>\r\n\u003C/template>\r\n```\r\n\r\n## Problem\r\napplication does not handle component error and just shows error 500 page.\r\n\r\n## Expectation\r\n`NuxtErrorBoundary` should render error slot correctly. application should not show error 500 page\n\n### Additional context\n\nI checked source code of `NuxtErrorBoundary` and noticed that there is a wrong condition for setting error\r\n```js\r\nonErrorCaptured((err, target, info) => {\r\n if (import.meta.client && !nuxtApp.isHydrating) {\r\n emit('error', err);\r\n nuxtApp.hooks.callHook('vue:error', err, target, info);\r\n error.value = err;\r\n return false; \r\n }\r\n});\r\n```\r\nwhen ssr is false, there is no need to check `nuxtApp.isHydrating`.\n\n### Logs\n\n_No response_",[2977,2978],{"name":2882,"color":2883},{"name":2869,"color":2870},24889,"`NuxtErrorBoundary` does not work properly when ssr is set to false","2023-12-25T17:54:02Z","https://github.com/nuxt/nuxt/issues/24889",0.6703271,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fO_TFMx_uROZ6d-bIJxZLrdUHDwVeorOEWHAYpTK3DbA":-1},"/nuxt/nuxt/28344"]