Courses

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()) }}">
    <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!

Next Lesson: Register Password Show/Hide/Strength
Login or register to comment or ask questions
avatar
asequeira

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

php artisan migrate

npm install

npm run dev

to build assets

avatar
Povilas Korop

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

avatar
asequeira

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?

avatar
Povilas Korop

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.

avatar
Richard A. Hoyle

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

avatar
muuucho

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

avatar
Nerijus

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

avatar
muuucho

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