\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? ",[2921,2924],{"name":2922,"color":2923},"bug","d73a4a",{"name":2925,"color":2926},"🔨 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.6655716,{"labels":2935,"number":2942,"owner":2928,"repository":2928,"state":2943,"title":2944,"updated_at":2945,"url":2946,"score":2947},[2936,2939],{"name":2937,"color":2938},"enhancement","8DEF37",{"name":2940,"color":2941},"2.x","d4c5f9",6699,"closed","Add client option to not replace current page component with \u003CNuxtError> component when there's an uncaught error","2023-02-14T11:37:17Z","https://github.com/nuxt/nuxt/issues/6699",0.60098004,{"description":2949,"labels":2950,"number":2952,"owner":2928,"repository":2928,"state":2943,"title":2953,"updated_at":2954,"url":2955,"score":2956},"This is similar to #2120 \r\n\r\nI was trying to make a 404 page that I can serve using Nginx. I was able to do that using `./pages/404.vue`. But I found that the router was still serving up `NuxtError` when vue-router 404 errors occurred.\r\n\r\nI [found the following the docs for the errors pages](https://github.com/nuxt/docs/blob/master/en/guide/views.md#error-page) but I was unable to actually get them working.\r\n\r\nI created a layout exactly as it described but still, nothing happened. My original 404 would work fine (`404.html` from `./pages/404.vue`) if I went to something like `missing.html` but would redirect to the default `NuxtError` component for all other router 404s.\r\n\r\nI then read the source and found that there is an undocumented option called `ErrorPage` that is available in `nuxt.config.js`. This property points to a component to use when there is an error or it will fall back to `./components/nuxt-error.vue`.\r\n\r\nI added an entry to my config for `ErrorPage` and pointed it to a new component I made at `./components/ErrorPage.vue`. After that, everything worked perfectly.\r\n\r\nSo I guess my concern is that either the docs are wrong, or there is a bug in nuxt that doesn't serve the `./layouts/errors.vue` properly.\r\n\r\nAnyone else having this issue?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1931\">#c1931\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2951],{"name":2940,"color":2941},2188,"Incorrect documentation or bug with errors.vue?","2023-01-18T15:43:11Z","https://github.com/nuxt/nuxt/issues/2188",0.6138896,{"labels":2958,"number":2966,"owner":2928,"repository":2928,"state":2943,"title":2967,"updated_at":2968,"url":2969,"score":2970},[2959,2962,2965],{"name":2960,"color":2961},"stale","ffffff",{"name":2963,"color":2964},"pending triage","E99695",{"name":2940,"color":2941},7743,"when using $nuxt.error from client side, error page will not respect layout ","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7743",0.63529515,{"description":2972,"labels":2973,"number":2975,"owner":2928,"repository":2928,"state":2943,"title":2976,"updated_at":2977,"url":2978,"score":2979},"Server error page render `node_modules\\nuxt\\lib\\app\\components\\nuxt-error.vue`\r\n\r\n`node_modules\\nuxt\\lib\\app\\components\\nuxt.js:3`\r\n\r\n```js\r\nimport NuxtError from '\u003C%= components.ErrorPage ? \r\n((components.ErrorPage.indexOf('~') === 0 || components.ErrorPage.indexOf('@') === 0)\r\n ?\r\n components.ErrorPage : \"../\" + components.ErrorPage) : \"./nuxt-error.vue\" %>'\r\n```\r\ni use \r\n\r\n```js\r\ncomponents:{\r\n ErrorPage:'~/components/ErrorPage'\r\n }\r\n````\r\n\r\nin nuxt.config.js\r\n\r\nbut it is still render nuxt-error.vue not my ErrorPage\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2333\">#c2333\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2974],{"name":2940,"color":2941},2685,"How to customized nuxt-error.vue","2023-01-18T16:02:28Z","https://github.com/nuxt/nuxt/issues/2685",0.6413118,{"description":2981,"labels":2982,"number":2984,"owner":2928,"repository":2928,"state":2943,"title":2985,"updated_at":2986,"url":2987,"score":2988},"hi \r\n \"nuxt\": \"^2.4.0\"\r\n\r\n my error component in layouts directory :\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"__nuxt-error-page\">\r\n \u003Cdiv class=\"error\">\r\n {{message}}\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n layout: 'empty',\r\n name: 'error',\r\n props: {\r\n error: {\r\n type: Object,\r\n default: null\r\n }\r\n },\r\n\r\n computed: {\r\n statusCode() {\r\n return (this.error && this.error.statusCode) || 500\r\n },\r\n message() {\r\n return this.error.message || `Error`\r\n }\r\n }\r\n }\r\n\u003C/script>\r\n```\r\n\r\nand empty layout : \r\n\r\n\r\n```\r\n\r\n\u003Ctemplate>\r\n \u003Cnuxt/>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n\r\n export default {\r\n name: \"empty\",\r\n }\r\n\u003C/script>\r\n```\r\n\r\n\r\nbut when i have error , error component use another layout .. for example, when I'm on the dashboard layout and an error occurs, error component mount on dashboard layout\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9154\">#c9154\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2983],{"name":2940,"color":2941},5654,"error page layout not correctly applied","2023-01-18T20:12:59Z","https://github.com/nuxt/nuxt/issues/5654",0.6423361,{"labels":2990,"number":2993,"owner":2928,"repository":2928,"state":2943,"title":2994,"updated_at":2995,"url":2996,"score":2997},[2991,2992],{"name":2937,"color":2938},{"name":2940,"color":2941},10611,"Static error page for when something goes really, really wrong","2024-06-14T16:02:00Z","https://github.com/nuxt/nuxt/issues/10611",0.6467347,{"description":2999,"labels":3000,"number":3002,"owner":2928,"repository":2928,"state":2943,"title":3003,"updated_at":3004,"url":3005,"score":3006},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v20.17.0`\n- Nuxt Version: `3.13.2`\n- CLI Version: `3.14.0`\n- Nitro Version: `2.9.7`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Reproduction\n\nMake a layout with noticeable parts (such as header). Add this to `error.vue`:\n```\n\u003Cscript setup lang=\"ts\">\nimport { useHead } from '#app'\nimport type { NuxtError } from '#app'\n\nconst props = defineProps\u003C{\n error: NuxtError\n}>()\n\nuseHead({\n title: `Error ${props.error.statusCode || 'Unknown'}`\n})\n\nconst handleError = () => {\n clearError({ redirect: '/' })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CNuxtLayout name=\"default\">\n \u003Cdiv class=\"error-container\">\n \u003Ch1>Error {{ props.error.statusCode || 'Unknown' }}\u003C/h1>\n \u003Cp>{{ props.error.message || 'An unexpected error occurred' }}\u003C/p>\n \u003Cbutton @click=\"handleError\">Go back to homepage\u003C/button>\n \u003C/div>\n \u003C/NuxtLayout>\n\u003C/template>\n```\nCause a 404 error to happen by going to a non-existent route.\n\nMy `layouts/default.vue` file:\n```\n\u003Ctemplate>\n \u003CNuxtLoadingIndicator color=\"#FFBC59\" />\n \u003CNavbar :language=\"language\" />\n \u003CNuxtPage :language=\"language\" />\n \u003CFooter :language=\"language\" />\n\u003C/template>\n// some other code\n```\n\nReproduction as a project: https://stackblitz.com/edit/github-nprqx2?file=layouts%2Fdefault.vue,error.vue,app.vue,pages%2Findex.vue,.gitignore\n\n### Describe the bug\n\nThe error message does not appear on the page unless I remove `\u003CNuxtLayout name=\"default\">` and `\u003C/NuxtLayout>` from error page. This is not what I want, I want error message inside the layout. I can achieve this by replacing `\u003CNuxtPage>` with `\u003Cslot>`, but that causes other problems (probably because props don't pass into the slot – should I make another bug report for that too?).\n\n### Additional context\n\nUsing a layout on an error page is supposed to work because documentation states:\n\n> you can still use layouts in the error file, by utilizing the [NuxtLayout](https://nuxt.com/docs/api/components/nuxt-layout) component and specifying the name of the layout\n\nBut I haven't found an example of that working. I am not 100% sure it's a bug, maybe I missed something.\n\n### Logs\n\n_No response_",[3001],{"name":2963,"color":2964},29284,"Using layout on error page causes error info to not appear","2024-10-05T18:46:02Z","https://github.com/nuxt/nuxt/issues/29284",0.65048695,{"description":3008,"labels":3009,"number":3011,"owner":2928,"repository":2928,"state":2943,"title":3012,"updated_at":3013,"url":3014,"score":3015},"Hi here, \r\n\r\nI try to customise my error page, i have read this doc https://nuxtjs.org/guide/views#error-page.\r\nThe `error.vue` works well but i encounter a problem with the layout property.\r\n\r\n## Versions\r\n ❯ npm -v \r\n5.3.0\r\n\r\n ❯ node -v \r\nv7.4.0\r\n\r\n\"nuxt\": \"^1.0.0-rc8\"\r\n\r\n## Steps to reproduce\r\n\r\n### Create a new project with the starter kit\r\n```\r\nvue init nuxt/starter error-layout\r\n```\r\n\r\n### Create layouts\r\nIn the `layouts` directory, create two files:\r\n\r\n#### error.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"container\">\r\n \u003Ch1 v-if=\"error.statusCode === 404\">Page not found\u003C/h1>\r\n \u003Ch1 v-else>An error occurred\u003C/h1>\r\n \u003Cnuxt-link to=\"/\">Home page\u003C/nuxt-link>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n props: ['error'],\r\n layout: 'blog' // you can set a custom layout for the error page\r\n}\r\n\u003C/script>\r\n```\r\n#### blog.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>My blog navigation bar here\u003C/div>\r\n \u003Cnuxt/>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Start the application\r\nRun:\r\n```\r\nnpm run dev\r\n```\r\n\r\n### Test the result\r\nOpen a browser and go to http://localhost:3000/unknow-page\r\n\r\n\r\n\r\n### Expected result\r\n\r\nThe text `My blog navigation bar here` should be visible in the rendered content, right?\r\nTell me if i am wrong or if something is missing in my code\r\n\r\nThank you for your work 👍 \r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1398\">#c1398\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3010],{"name":2940,"color":2941},1566,"Layout on error.vue does not seem to work","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1566",0.65062135,{"description":3017,"labels":3018,"number":3021,"owner":2928,"repository":2928,"state":2943,"title":3022,"updated_at":3023,"url":3024,"score":3025},"### Version\n\n[v2.5.1](https://github.com/nuxt.js/releases/tag/v2.5.1)\n\n### Reproduction link\n\n[https://codesandbox.io/s/5y4wzx0ox4](https://codesandbox.io/s/5y4wzx0ox4)\n\n### Steps to reproduce\n\n- Go to the url `/article/291`\n- Page is created to show an 404 error page. (If you get this error the problem is fixed)\n- Page shows article page without showing 404 error page.\n\n### What is expected ?\n\nThe page should display the 404 error page called by\nasyncData() using the error() function.\n\n### What is actually happening?\n\nIt shows the page content and ignores the error() call.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8957\">#c8957\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3019,3020],{"name":2963,"color":2964},{"name":2940,"color":2941},5409,"Nuxt-child is missing error handler from Nuxt component.","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5409",0.6511243,["Reactive",3027],{},["Set"],["ShallowReactive",3030],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fl7e-5vuvharCwjCgkQNqHYB5AdBaan01HDau5EQGGbQ":-1},"/nuxt/nuxt/25445"]