How to Create A Custom 404 Page In Gridsome
The other day I was playing around in Gravit and made this:
And thought "Hmmm, I should find something to do with this." I decided it would fit perfectly on my site as the 404 page.
So let's see how that's done!
Gridsome's 404.vue file
404.vuepage to your
By default, navigating to a path that doesn't exist will return a plain page with "404 - not found" in an h1 tag - not particularly interesting or helpful since the user now has to either go back a page or change the URL themselves.
Gridsome makes replacing the default 404 page fairly straightforward - add a
404.vue page to your
Besides displaying the error message, I also applied my default layout to the page so that the user could easily get back to a valid page, and so the error page wasn't as jarring.
As of the time of writing, this is the code behind my 404 page:
<template> <Layout> <div class="post max-w-4xl mx-auto text-center"> <h1> 404 - page not found </h1> <p>Oops! That page returns an</p> <img src="~/assets/errorsAllTheWayDown.png" width="500" quality="50" alt="error text with a rainbow gradient and shadows creating a pop-out 3d effect" /> </div> </Layout> </template>
Now that I have some customization in place, I might start experimenting with adding fun elements to turn my 404 page into a bit of an Easter Egg like DEV's offline page!
I also made a 'flat' version of the error image which is available on RedBubble! 👀