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 🙌