The other day I was playing around inGravit and made this:

And thought "Hmmm, I should find something to do with this." I decided it would fit perfectly on my site as the404 page.

So let's see how that's done!

Gridsome's 404.vue file

add a404.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 a404.vue page to yoursrc/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:

//src/pages/404.vue<template><Layout><divclass="post max-w-4xl mx-auto text-center"><h1>        404 - page not found</h1><p>Oops! That page returns an</p><g-imagesrc="~/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 likeDEV's offline page!

I also made a 'flat' version of the error image which isavailable on RedBubble! 👀

Have you seen any interesting offline or 404 pages recently? Share your favorites below! 👇