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

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()) }}">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<body class="font-sans antialiased">

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


return [
// ...
'layout' => '',
'layout' => '',
// ...

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


After installing Breeze (php artisan breeze:install) don't forget to

php artisan migrate

npm install

npm run dev

to build assets


From what I remember, recent Breeze version(s) do that for you automatically.


yes, but I have to keep "npm run dev" running or run "npm run build" after creating each component to have the full css. Am I missing something?


Yes, you're right, Breeze will do the first build for you. For the future changes, yes, you would need to keep "npm run dev" or run "npm run build" every time.


if you run npm run dev in your Git Bash it will keep running in tell you Shift C to stop it.


Should it work following along on a Jetstream+Livewire installation instead of a Breeze+Livewire one?


There moght be some differences but the main logoc should work.


Thanks, I'll give it a try then! (since it's Tailwind...)