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 projectcd projectcomposer require laravel/breeze --devphp artisan breeze:installThat's it, we have default Laravel Breeze installed:
Next, we will install Livewire.
composer require livewire/livewireAdd 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 --configconfig/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!
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.