🔦 Nuxt 404 Module

Nuxt.js module to render trendy 404 pages.

Open Preview

Installation

yarn add @luciorubeens/nuxt-404
# or
npm i @luciorubeens/nuxt-404

Setup

Add @luciorubeens/nuxt-404 to modules section of nuxt.config.js:

{
  modules: [
    '@luciorubeens/nuxt-404',
  ],
  p404: {
    // Manipulate module options (see below)
  }
}

Options

Option	Default	Description
names	See list below	Array of illustration names to display randomly
title	Illustration title	Page title
description	Illustration description	Page subtitle
colorBg	Illustration background	Page background color
colorText	Illustration color	Text color
linkText	Click here to return to home.	Text to display on anchor link

Usage

Specific illustrations

{
  modules: [
    '@luciorubeens/nuxt-404',
  ],
  p404: {
    names: ['Confused Travolta', 'Space']
  }
}

Custom options

{
  modules: [
    '@luciorubeens/nuxt-404',
  ],
  p404: {
    title: '404',
    colorBg: '#FFFFFF',
    colorText: '#333333'
  }
}

Illustrations

Click on the name to see the illustration.

Name	Source
Space	Ionic Framework
UnDraw	unDraw
Confused Travolta	Nuxt.js
Mailchimp	Mailchimp
Astronaut	Kapwing
Ballon Lost	Kapwing
Boat Leak	Kapwing
Broken Clock	Kapwing
Broken Mug	Kapwing
Burnt Toast	Kapwing
Caution Tape	Kapwing
Dog Ate	Kapwing
Ghost	Kapwing
Ice Cream Spill	Kapwing
Kids Toy	Kapwing
Loch Ness	Kapwing
Lost Keys	Kapwing
Lost Tourist	Kapwing
Ostrich	Kapwing
Pizza Box	Kapwing
Shoes Tied	Kapwing
Spilled Milk	Kapwing
Trash	Kapwing

Disclaimer

The illustrations are not my own, most are from Kapwing including the texts and colors. Below you can see the original page not found from the source:

• Kapwing 404 Illustrations
• Ionic Framework
• unDraw
• Nuxt.js
• Mailchimp

Contribute

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Install dependencies using Yarn: yarn install
3. Make the necessary changes and ensure that the tests are passing using yarn test
4. Send a pull request 🙌