In general, there are two main ways to use Livewire:
- You build the full project with Laravel Controllers and use Livewire only for small dynamic elements on the pages
- You use Livewire Components instead of Laravel Controllers, with so-called Full-Page Components
Your choice is yours; it's a personal preference. In this lesson, we'll see how to do it with Full-Page components.
Routes
Instead of mapping to the Controller in the Routes files, you need to map directly to the Livewire component.
routes/web.php:
use App\Livewire\CompanyCreate;use App\Livewire\CompanyEdit; // ... Route::resource('companies', CompanyController::class); Route::get('companies/create', CompanyCreate::class) ->name('companies.create'); Route::get('companies/{company}/edit', CompanyEdit::class) ->name('companies.edit'); Layout Files
Both Create and Edit forms can use the same layout for the HTML header and footer.
Livewire uses Blade components as an application layout. It must have a {{ $slot }} placeholder.
By default, Livewire uses the resources/views/components/layouts/app.blade.php Blade file for the main layout. So, we take the main HTML from our companies/create.blade.php and companies/edit.blade.php and put in that new layout file with a {{ $slot }} placeholder.
resources/views/components/layouts/app.blade.php
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Form</title> <script src="https://cdn.tailwindcss.com"></script></head><body class="flex items-center justify-center min-h-screen bg-gray-100"> {{ $slot }}</body></html>Then, we may delete three files...