Prepare Laravel Project

First, before starting to implement all features, we need to create a Laravel project, install Laravel Breeze for quick authentication scaffolding, and Livewire for dynamic interfaces.

laravel new project
cd project
composer require laravel/breeze --dev
php artisan breeze:install

That's it, we have default Laravel Breeze installed:

default breeze register page

Next, we will install Livewire.

composer require livewire/livewire

Add the following Blade directive before the end body tag in the resources/views/layouts/app.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        //
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        //
        @livewireScripts 
    </body>
</html>

We will be using full-page Livewire components—livewire checks for the layout file in resources/views/components/layouts/app.blade.php place. Breeze's main layout is in a different place. We must publish the Livewire configuration file and set the layout location.

php artisan livewire:publish --config

config/livewire.php:

return [
    // ...
 
    'layout' => 'components.layouts.app', 
    'layout' => 'layouts.app', 
 
    // ...
];

That's it for the preparation quick start, now we're ready to create our Livewire components, in the next lesson!

Course Content

Practical Livewire 3: Order Management System Step-by-Step

Prepare Laravel Project

Course Content

Preparation and Auth

Managing Categories

Managing Products

Managing Orders