Practical Livewire: 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 directives in the head tag, and 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'])
        @livewireStyles 
    </head>
    <body class="font-sans antialiased">
        //
        @livewireScripts 
    </body>
</html>

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

Next Lesson: Register Password Show/Hide/Strength

asequeira

7 months ago

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

php artisan migrate

npm install

npm run dev

to build assets

Povilas Korop

7 months ago

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

asequeira

7 months ago

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?

Povilas Korop

7 months ago

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.

👍 5