https://github.com/luciorubeens/nuxt-404
🔦 Nuxt.js module to render trendy 404 pages.
https://github.com/luciorubeens/nuxt-404
404 nuxt nuxt-module nuxtjs page-not-found vue
Last synced: 2 months ago
JSON representation
🔦 Nuxt.js module to render trendy 404 pages.
- Host: GitHub
- URL: https://github.com/luciorubeens/nuxt-404
- Owner: luciorubeens
- License: mit
- Created: 2019-10-25T14:07:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-26T14:32:35.000Z (almost 6 years ago)
- Last Synced: 2024-12-06T17:15:19.344Z (10 months ago)
- Topics: 404, nuxt, nuxt-module, nuxtjs, page-not-found, vue
- Language: JavaScript
- Homepage: https://nuxt-404-module.netlify.com/404
- Size: 1.85 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
🔦 Nuxt 404 Module
Nuxt.js module to render trendy 404 pages.
## Installation
```bash
yarn add @luciorubeens/nuxt-404
# or
npm i @luciorubeens/nuxt-404
```
## Setup
Add `@luciorubeens/nuxt-404` to modules section of `nuxt.config.js`:
```js
{
modules: [
'@luciorubeens/nuxt-404',
],
p404: {
// Manipulate module options (see below)
}
}
```
## Options
| Option | Default | Description |
| ------ | ------- | ----------- |
| `names` | [See list below](#Illustrations) | 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
```js
{
modules: [
'@luciorubeens/nuxt-404',
],
p404: {
names: ['Confused Travolta', 'Space']
}
}
```
### Custom options
```js
{
modules: [
'@luciorubeens/nuxt-404',
],
p404: {
title: '404',
colorBg: '#FFFFFF',
colorText: '#333333'
}
}
```
## Illustrations
Click on the name to see the illustration.
| Name | Source |
| ---- | ------ |
| [Space](./src/images/Space.png) | Ionic Framework |
| [UnDraw](./src/images/UnDraw.png) | unDraw |
| [Confused Travolta](./src/images/ConfusedTravolta.png) | Nuxt.js |
| [Mailchimp](./src/images/Mailchimp.png) | Mailchimp |
| [Astronaut](./src/images/Astronaut.png) | Kapwing |
| [Ballon Lost](./src/images/BallonLost.png) | Kapwing |
| [Boat Leak](./src/images/BoatLeak.png) | Kapwing |
| [Broken Clock](./src/images/BrokenClock.png) | Kapwing |
| [Broken Mug](./src/images/BrokenMug.png) | Kapwing |
| [Burnt Toast](./src/images/BurntToast.png) | Kapwing |
| [Caution Tape](./src/images/CautionTape.png) | Kapwing |
| [Dog Ate](./src/images/DogAte.png) | Kapwing |
| [Ghost](./src/images/Ghost.png) | Kapwing |
| [Ice Cream Spill](./src/images/IceCreamSpill.png) | Kapwing |
| [Kids Toy](./src/images/Kid_sToy.png) | Kapwing |
| [Loch Ness](./src/images/LochNess.png) | Kapwing |
| [Lost Keys](./src/images/LostKeys.png) | Kapwing |
| [Lost Tourist](./src/images/LostTourist.png) | Kapwing |
| [Ostrich](./src/images/Ostrich.png) | Kapwing |
| [Pizza Box](./src/images/PizzaBox.png) | Kapwing |
| [Shoes Tied](./src/images/ShoesTied.png) | Kapwing |
| [Spilled Milk](./src/images/SpilledMilk.png) | Kapwing |
| [Trash](./src/images/Trash.png) | 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](https://www.kapwing.com/404-illustrations)
- [Ionic Framework](https://ionicframework.com/404)
- [unDraw](https://undraw.co/)
- [Nuxt.js](https://nuxtjs.org/404)
- [Mailchimp](https://mailchimp.com/404/)
## Contribute
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) 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 🙌