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
add a
404.vue
page to yoursrc/pages/
folder
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 src/pages/
folder.
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! ๐