[{"data":1,"prerenderedAt":352},["ShallowReactive",2],{"blog-article-/blog/nuxt-error-page":3,"blog-surround-/blog/nuxt-error-page":343},{"id":4,"title":5,"body":6,"canonical":328,"date":329,"description":330,"extension":331,"featured":332,"image":333,"meta":334,"navigation":335,"ogImage":328,"path":336,"provider":337,"published":332,"seo":338,"stem":339,"tags":340,"url":328,"__hash__":342},"blog/blog/nuxt-error-page.md","Creating an error page in Nuxt.js",{"type":7,"value":8,"toc":326},"minimark",[9,18,24,95,102,181,190,240,243,284,287,315,322],[10,11,12,13,17],"p",{},"An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an ",[14,15,16],"code",{},"error.vue"," file in your layouts folder. Layouts? Yes, that is correct. Although the error page is a page, it must go inside the layouts folder.",[10,19,20,21,23],{},"In your ",[14,22,16],{}," page you can keep it simple by just adding a template with some text.",[25,26,31],"pre",{"className":27,"code":28,"language":29,"meta":30,"style":30},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>OOOOPPPPPPS. No page found\u003C/p>\n  \u003C/div>\n\u003C/template>\n","html","",[14,32,33,49,60,75,85],{"__ignoreMap":30},[34,35,38,42,46],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sVt8B","\u003C",[34,43,45],{"class":44},"s9eBZ","template",[34,47,48],{"class":40},">\n",[34,50,52,55,58],{"class":36,"line":51},2,[34,53,54],{"class":40},"  \u003C",[34,56,57],{"class":44},"div",[34,59,48],{"class":40},[34,61,63,66,68,71,73],{"class":36,"line":62},3,[34,64,65],{"class":40},"    \u003C",[34,67,10],{"class":44},[34,69,70],{"class":40},">OOOOPPPPPPS. No page found\u003C/",[34,72,10],{"class":44},[34,74,48],{"class":40},[34,76,78,81,83],{"class":36,"line":77},4,[34,79,80],{"class":40},"  \u003C/",[34,82,57],{"class":44},[34,84,48],{"class":40},[34,86,88,91,93],{"class":36,"line":87},5,[34,89,90],{"class":40},"\u003C/",[34,92,45],{"class":44},[34,94,48],{"class":40},[10,96,97,98,101],{},"Or you can print a message depending on the error status which you have access to by using ",[14,99,100],{},"error.statusCode",".",[25,103,105],{"className":27,"code":104,"language":29,"meta":30,"style":30},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1 v-if=\"error.statusCode === 404\">Page not found\u003C/h1>\n    \u003Ch1 v-else>An error occurred\u003C/h1>\n  \u003C/div>\n\u003C/template>\n",[14,106,107,115,123,148,164,172],{"__ignoreMap":30},[34,108,109,111,113],{"class":36,"line":37},[34,110,41],{"class":40},[34,112,45],{"class":44},[34,114,48],{"class":40},[34,116,117,119,121],{"class":36,"line":51},[34,118,54],{"class":40},[34,120,57],{"class":44},[34,122,48],{"class":40},[34,124,125,127,130,134,137,141,144,146],{"class":36,"line":62},[34,126,65],{"class":40},[34,128,129],{"class":44},"h1",[34,131,133],{"class":132},"sScJk"," v-if",[34,135,136],{"class":40},"=",[34,138,140],{"class":139},"sZZnC","\"error.statusCode === 404\"",[34,142,143],{"class":40},">Page not found\u003C/",[34,145,129],{"class":44},[34,147,48],{"class":40},[34,149,150,152,154,157,160,162],{"class":36,"line":77},[34,151,65],{"class":40},[34,153,129],{"class":44},[34,155,156],{"class":132}," v-else",[34,158,159],{"class":40},">An error occurred\u003C/",[34,161,129],{"class":44},[34,163,48],{"class":40},[34,165,166,168,170],{"class":36,"line":87},[34,167,80],{"class":40},[34,169,57],{"class":44},[34,171,48],{"class":40},[34,173,175,177,179],{"class":36,"line":174},6,[34,176,90],{"class":40},[34,178,45],{"class":44},[34,180,48],{"class":40},[10,182,183,184,187,188,101],{},"Don't forget to add the ",[14,185,186],{},"error prop"," so you can use ",[14,189,100],{},[25,191,193],{"className":27,"code":192,"language":29,"meta":30,"style":30},"\u003Cscript>\n  export default {\n    props: ['error']\n  }\n\u003C/script>\n",[14,194,195,204,216,227,232],{"__ignoreMap":30},[34,196,197,199,202],{"class":36,"line":37},[34,198,41],{"class":40},[34,200,201],{"class":44},"script",[34,203,48],{"class":40},[34,205,206,210,213],{"class":36,"line":51},[34,207,209],{"class":208},"szBVR","  export",[34,211,212],{"class":208}," default",[34,214,215],{"class":40}," {\n",[34,217,218,221,224],{"class":36,"line":62},[34,219,220],{"class":40},"    props: [",[34,222,223],{"class":139},"'error'",[34,225,226],{"class":40},"]\n",[34,228,229],{"class":36,"line":77},[34,230,231],{"class":40},"  }\n",[34,233,234,236,238],{"class":36,"line":87},[34,235,90],{"class":40},[34,237,201],{"class":44},[34,239,48],{"class":40},[10,241,242],{},"You can also add a layout to your error page just like you can do with any other page.",[25,244,246],{"className":27,"code":245,"language":29,"meta":30,"style":30},"\u003Cscript>\n  export default {\n    layout: 'basic'\n  }\n\u003C/script>\n",[14,247,248,256,264,272,276],{"__ignoreMap":30},[34,249,250,252,254],{"class":36,"line":37},[34,251,41],{"class":40},[34,253,201],{"class":44},[34,255,48],{"class":40},[34,257,258,260,262],{"class":36,"line":51},[34,259,209],{"class":208},[34,261,212],{"class":208},[34,263,215],{"class":40},[34,265,266,269],{"class":36,"line":62},[34,267,268],{"class":40},"    layout: ",[34,270,271],{"class":139},"'basic'\n",[34,273,274],{"class":36,"line":77},[34,275,231],{"class":40},[34,277,278,280,282],{"class":36,"line":87},[34,279,90],{"class":40},[34,281,201],{"class":44},[34,283,48],{"class":40},[10,285,286],{},"So as you can see it is really easy to add an error page yet it is something we normally forget todo. Error pages can also be fun so feel free to add some nice images and don't forget to link back to the home page to make it easier for your users if they end up on your error page.",[25,288,290],{"className":27,"code":289,"language":29,"meta":30,"style":30},"\u003CNuxtLink to=\"/\">Home page\u003C/NuxtLink>\n",[14,291,292],{"__ignoreMap":30},[34,293,294,296,300,303,305,308,311,313],{"class":36,"line":37},[34,295,41],{"class":40},[34,297,299],{"class":298},"s7hpK","NuxtLink",[34,301,302],{"class":132}," to",[34,304,136],{"class":40},[34,306,307],{"class":139},"\"/\"",[34,309,310],{"class":40},">Home page\u003C/",[34,312,299],{"class":298},[34,314,48],{"class":40},[10,316,317,318,321],{},"Note: Although this page is in the layouts folder you do not use the ",[14,319,320],{},"\u003CNuxt />"," component in this page.",[323,324,325],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":30,"searchDepth":51,"depth":51,"links":327},[],null,"2020-04-23","An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an `error.vue` file in your layouts folder. Layouts?","md",false,"photo-1594322436404-5a0526db4d13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop",{},true,"/blog/nuxt-error-page","imgix",{"title":5,"description":330},"blog/nuxt-error-page",[341],"nuxt","vUpu7YrYtSsrDPX3gcRKrlCnSrfGyzXoDW8YDxdi2e4",[344,348],{"title":345,"path":346,"stem":347,"children":-1},"ignoring your files with Nuxt.js","/blog/nuxt-ignoring-files-nuxt","blog/nuxt-ignoring-files-nuxt",{"title":349,"path":350,"stem":351,"children":-1},"Configure the Nuxt.js server to see your site on your mobile","/blog/nuxt-configure-server-to-see-site-on-mobile","blog/nuxt-configure-server-to-see-site-on-mobile",1790839748316]