New Product Form: Full-Page Component

In this lesson, let's create a second Livewire component for creating a product. We can call this component in two ways.

The first one is the same way as we did with the Products Livewire component making a controller that returns a View and calls the Livewire component. The second one is making the Livewire component a full-page and mapping it directly in the routes file.

This lesson will use the second method, the Livewire component, as a full page.

Creating Livewire Component

So first, we need to create a component.

php artisan make:livewire ProductsCreate

Now we can create a route and map it to this component and add a link to this route.

routes/web.php:

Route::get('products/create', \App\Livewire\ProductsCreate::class)->name('products.create');

resources/livewire/products.blade.php:

<div class="space-y-6">
    <div class="flex justify-between"> 
        <div class="space-x-8">
            <input wire:model.live="searchQuery" type="search" id="search" placeholder="Search...">
 
            <select wire:model.live="searchCategory" name="category">
                <option value="0">-- CHOOSE CATEGORY --</option>
                @foreach($categories as $id => $category)
                    <option value="{{ $id }}">{{ $category }}</option>
                @endforeach
            </select>
        </div> 
        <a wire:navigate href="{{ route('products.create') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 rounded-md font-semibold text-xs text-white uppercase tracking-widest">
            Add new product
        </a> 
    </div>
    // ...
</div>

Now let's add a form and make it work by binding properties and making a method for...