Livewire Starter Kit Laravel Package

Getting Started

Minimal Steps to Begin

1. Installation Clone the starter kit and install dependencies:

   git clone https://github.com/laravel/livewire-starter-kit.git my-app
   cd my-app
   composer install
   npm install
   npm run dev
   

   Run migrations and seeders:

   php artisan migrate --seed
   

2. First Use Case: Creating a Livewire Component Generate a new Livewire component:

   php artisan make:livewire Counter
   

   Edit app/Http/Livewire/Counter.php and its corresponding Blade view (resources/views/livewire/counter.blade.php). Use the component in a Blade template:

   @livewire('counter')
   

3. Key Directories to Explore

   • app/Http/Livewire/ – Default Livewire components.
   • resources/views/ – Blade templates (e.g., layouts/app.blade.php).
   • resources/js/ – TypeScript/Flux UI integration.
   • config/livewire.php – Livewire-specific configurations.

Implementation Patterns

Core Workflows

1. Component-Based Development

   • Pattern: Use Livewire components for reusable UI elements (e.g., forms, modals, tables).
   • Example: Replace a static form with a Livewire component for real-time validation:

     // app/Http/Livewire/UserForm.php
     public $name;
     public $email;
     
     public function save()
     {
         $this->validate([
             'name' => 'required',
             'email' => 'required|email',
         ]);
         User::create($this->only(['name', 'email']));
     }
     

     <!-- resources/views/livewire/user-form.blade.php -->
     <input wire:model="name" type="text">
     <input wire:model="email" type="email">
     <button wire:click="save">Save</button>
     

2. State Management

   • Pattern: Leverage Livewire’s reactive properties for dynamic state.
   • Tip: Use public properties for two-way binding and protected for internal state.
   • Example:

     protected $search = '';
     public $results = [];
     
     public function updatedSearch()
     {
         $this->results = User::where('name', 'like', '%'.$this->search.'%')->get();
     }
     

3. Integration with Flux UI

   • Pattern: Use Flux UI components (e.g., <flux-button>, <flux-modal>) for pre-styled, accessible UI.
   • Example:

     <flux-modal wire:model="isOpen">
         <flux-button wire:click="$set('isOpen', true)">Open Modal</flux-button>
         <template #content>
             <p>Modal content here.</p>
         </template>
     </flux-modal>
     

   • Note: Flux UI requires TypeScript setup (see resources/js/).

4. API-Driven Components

   • Pattern: Fetch data via Laravel API routes and update Livewire state.
   • Example:

     public function mount()
     {
         $this->posts = Post::latest()->take(10)->get();
     }
     
     public function loadMore()
     {
         $this->posts = Post::latest()->take(20)->get();
     }
     

5. Authentication Flow

   • Pattern: Use Livewire for login/registration forms with real-time validation.
   • Example:

     public function login()
     {
         $this->validate([
             'email' => 'required|email',
             'password' => 'required',
         ]);
         if (auth()->attempt($this->only(['email', 'password']))) {
             redirect('/dashboard');
         }
     }
     

Gotchas and Tips

Pitfalls

1. TypeScript/Flux UI Setup

   • Issue: Forgetting to compile TypeScript (npm run dev or npm run build) after installing Flux UI components.
   • Fix: Run npm run dev in watch mode during development.

2. Livewire Property Binding

   • Issue: Using wire:model with non-public properties (Livewire only binds to public properties by default).
   • Fix: Ensure properties are public or use wire:model="property.name" for nested objects.

3. Caching and Livewire

   • Issue: Livewire components not updating due to Blade cache.
   • Fix: Clear Blade cache:

     php artisan view:clear
     

4. Flux UI Template Slots

   • Issue: Template slots not rendering in Flux components.
   • Fix: Ensure slots are defined in the component’s Blade file:

     <flux-modal>
         <template #header>...</template>
         <template #content>...</template>
     </flux-modal>
     

5. Livewire + Alpine.js Conflicts

   • Issue: Alpine.js directives not working inside Livewire components.
   • Fix: Use wire:ignore on Alpine-managed elements or initialize Alpine after Livewire mounts:

     <div wire:ignore x-data="{ open: false }">
         <!-- Alpine logic -->
     </div>
     

Debugging Tips

1. Livewire Logs

   • Enable Livewire logging in config/livewire.php:

     'log' => env('LIVEWIRE_LOG', true),
     

   • Check storage/logs/livewire.log for component lifecycle events.

2. Property Updates

   • Use dd($this->property) in updatedProperty() methods to debug reactive updates.

3. Network Requests

   • Inspect Livewire’s XHR requests in browser dev tools (filter by X-Livewire headers).

Extension Points

1. Custom Livewire Directives

   • Extend Livewire’s Blade directives by publishing the config:

     php artisan vendor:publish --tag=livewire-config
     

   • Add custom directives in app/Providers/AppServiceProvider.php:

     Livewire::component('custom-directive', CustomDirective::class);
     

2. Flux UI Theming

   • Override Flux UI styles by extending its Tailwind config in tailwind.config.js:

     module.exports = {
         plugins: [
             require('@flux-ui/tailwind'),
             // Custom plugins
         ],
     };
     

3. Livewire Middleware

   • Apply middleware to Livewire components via HandleIncomingRequests:

     public function handle(IncomingRequest $request)
     {
         if ($request->isLivewire()) {
             $request->merge([
                 'middleware' => ['auth'],
             ]);
         }
     }
     

4. Testing Livewire

   • Use Livewire::test() in PHPUnit:

     public function test_counter()
     {
         Livewire::test('counter')
             ->assertSee('Count: 0')
             ->call('increment')
             ->assertSee('Count: 1');
     }