Laravel comes with some default error pages that show up when you hit various errors. The most popular being the 404.
BladewindUI provides an error component that lets you have error pages looking consistent. By default the Laravel error pages
are stashed away in /vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/views
. To use the Bladewind error pages component you will first need to
publish the Laravel error pages to your working resources directory by running the command below from your terminal.
php artisan vendor:publish --tag=laravel-errors
You will get a message similar to Copied Directory [/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/views] To [/resources/views/errors]
The Laravel error pages should now be available in resources/views/errors
. You can now edit any of the error pages that correspond to an http status code. 401.blade.php, 403.blade.php, 404.blade.php, 419.blade.php, 429.blade.php, 500.blade.php, 503.blade.php.
Let's take for example the default resources/views/erros/404.blade.php
, the code in there looks like this:
@extends('errors::minimal')
@section('title', __('Not Found'))
@section('code', '404')
@section('message', __('Not Found'))
You can replace everything in the file with the BladewindUI error component. Click here to view an example 404 page using the BladewindUI error component. This just points to a url that has no matching route. The default 404 illustration used is from Storyset.com
<!--
x-frameless is a layout file specific to the documentation that
just gets rid of the left navigation. It is not available as a component
-->
<x-frameless title="404 | Page not found">
<x-bladewind::error
heading="Page not found"
description="The page you requested does not exist.
We have a caffeine-induced bot working overtime to find it for you"
button_text="Back to docs"
button_url="/extra/error-pages">
<x-slot name="image">
<img src="/assets/images/404.svg" alt="404 image" />
</x-slot>
</x-bladewind::error>
</x-frameless>
The image to be displayed on the error page has been setup as a slot so you can decide if you want to use
<img>
or <svg>
The table below shows a comprehensive list of all the attributes available for the Error component.
Option | Default | Available Values |
---|---|---|
heading | Error! | Heading of the error being displayed. Example: Page not found. |
description | Something went wrong | Full description of the error. Should make sense to the end user. |
button_text | Go to homepage | Text to display on the call to action button |
button_url | / | Url to visit when the call to action button is clicked |
image | 404.svg | The image to display |
<x-bladewind::error
heading="Page not found"
description="The page you requested does not exist.
We have a caffeine-induced bot working overtime to find it for you"
button_text="Back to docs"
button_url="/extra/error-pages">
<x-slot name="image">
<img src="/assets/images/404.svg" alt="404 image" />
</x-slot>
</x-bladewind::error>
resources > views > components > bladewind > error.blade.php