logo
v2.8.0

Error Pages

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>

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Error component.

IMPORTANT: Projects running Laravel 8 please read this

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

Error with all attributes defined

        
            <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>
        
    
The source file for this component is available in resources > views > components > bladewind > error.blade.php