Laravel Livewire

What it does

This skill enables AI agents to work with Laravel Livewire, a framework for building dynamic web applications within the Laravel PHP ecosystem. It allows frontend components to directly interact with server-side logic and databases, facilitating rapid development and improved responsiveness. The skill provides guidance on component selection, data binding strategies, and critical coding rules for effective Livewire implementation.

When to use it

• Developing interactive forms or dashboards in a Laravel application.
• Creating single-file components (Volt) for simple page elements.
• Implementing file-based routing with Volt components using Folio.
• Integrating dynamic search functionality with debounced inputs.
• Building complex components requiring class-based structures and internal logic.

Key capabilities

• Component Creation: Guidance on choosing between class-based, Volt functional API, or Volt class-based components based on complexity.
• Data Binding: Utilizing wire:model, wire:model.blur, and wire:model.live for various data binding scenarios (form fields, search inputs, checkboxes).
• Actions & Events: Calling PHP methods from the frontend and facilitating component communication through events.
• Volt Components: Building single-file components for streamlined development.
• Folio Routing: Implementing file-based routing using Folio in conjunction with Volt.

Example prompts

• "Create a Livewire component for managing user profiles."
• "How can I implement debounced search input using Livewire?"
• "What's the best way to handle form validation within a Livewire component?"

Tips & gotchas

• Always use wire:key in loops: This is crucial for proper rendering and updates.
• Validation: Prefer wire:model.blur over .live for form validation.
• Debouncing: Use .debounce.300ms to optimize search input performance.