DEV Community

Cover image for Create A Custom 404 Page In Gridsome
Tyler V. (he/him)
Tyler V. (he/him)

Posted on • Updated on • Originally published at terabytetiger.com

 

Create A Custom 404 Page In Gridsome

The other day I was playing around in Gravit and made this:

the word error with a rainbow gradient and black shadow 3D pop-out effect

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 your src/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:

//src/pages/404.vue

<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>
      <g-image
        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>
Enter fullscreen mode Exit fullscreen mode

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! 👀


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

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.