/laravel-agent:livewire:make

Overview

The /livewire:make command generates reactive Livewire components for the TALL stack (Tailwind, Alpine, Laravel, Livewire). It creates complete components with PHP classes and Blade views, supporting various component types including full CRUD interfaces, data tables, forms, modals, and search functionality.

Usage

/laravel-agent:livewire:make [Name] [type]

Examples

# Create a full CRUD component (default)
/laravel-agent:livewire:make Orders

# Create a data table with search, sort, and pagination
/laravel-agent:livewire:make Products table

# Create a form component with validation
/laravel-agent:livewire:make Contact form

# Create a modal dialog component
/laravel-agent:livewire:make DeleteConfirm modal

# Create a real-time search component
/laravel-agent:livewire:make ProductSearch search

Component Types

The command supports several component types, each optimized for different use cases:

Type	Description	Features
`crud`	Full CRUD interface (default)	Index, create, edit, delete operations
`table`	Data table with filters	Search, sort, pagination, bulk actions
`form`	Form with validation	Real-time validation, file uploads
`modal`	Modal dialog	Show/hide functionality, backdrop
`search`	Real-time search	Live filtering, debouncing

What Gets Created

A Livewire component includes the following files:

Component	Location	Description
PHP Class	`app/Livewire/`	Component logic, properties, and methods
Blade View	`resources/views/livewire/`	Component template with Tailwind CSS
Validation Rules	Inline in PHP class	Real-time validation rules

Available Features

Customize your component by specifying features in the command description:

search - Add real-time search functionality
sort - Enable column sorting
pagination - Add pagination controls
validation - Include real-time validation
file-upload - Support file uploads with preview

Example Output Structure

For /laravel-agent:livewire:make Products table:

app/
└── Livewire/
    └── Products.php
resources/
└── views/
    └── livewire/
        └── products.blade.php

Generated Component Example

Example of a generated table component:

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Product;

class Products extends Component
{
    use WithPagination;

    public $search = '';
    public $sortField = 'name';
    public $sortDirection = 'asc';

    public function sortBy($field)
    {
        if ($this->sortField === $field) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortDirection = 'asc';
        }

        $this->sortField = $field;
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function render()
    {
        $products = Product::query()
            ->when($this->search, function ($query) {
                $query->where('name', 'like', '%' . $this->search . '%');
            })
            ->orderBy($this->sortField, $this->sortDirection)
            ->paginate(10);

        return view('livewire.products', [
            'products' => $products,
        ]);
    }
}

Generated Blade View Example

<div>
    <div class="mb-4">
        <input
            type="text"
            wire:model.live="search"
            placeholder="Search products..."
            class="w-full px-4 py-2 border rounded"
        >
    </div>

    <table class="min-w-full divide-y divide-gray-200">
        <thead>
            <tr>
                <th wire:click="sortBy('name')" class="cursor-pointer">
                    Name
                </th>
                <th wire:click="sortBy('price')" class="cursor-pointer">
                    Price
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $product)
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            @endforeach
        </tbody>
    </table>

    
</div>

Process Details

The command uses the Task tool with subagent type laravel-livewire to generate components. The task specification includes:

Create Livewire component:

Name: <name>
Type: <type>
Features: [search, sort, pagination, validation, file-upload]

Best Practices

Component naming - Use PascalCase for component names (Products, not products)
Keep components focused - Each component should have a single responsibility
Use Alpine.js sparingly - Livewire handles most interactivity; use Alpine for UI-only interactions
Optimize performance - Use lazy loading and debouncing for real-time features
Follow Tailwind conventions - Use utility classes consistently

Related Agent

This command uses the laravel-livewire agent.