Livewire 3.0's New wire: Directives Explained (2025 Guide)

• Introduction
• 1. wire:poll - Auto-Updating Components
• 2. wire:transition - Smooth Animations
• 3. wire:confirm - Action Confirmation
• 4. wire:model.lazy.debounce - Advanced Form Handling
• 5. wire:navigate.hover - Smart Preloading
• Practical Example: Live Search Component
• Performance Considerations
• Comparison Table: New vs Old Directives
• Conclusion

#Introduction

Livewire 3.0 introduced several powerful new wire: directives that dramatically simplify frontend interactions while reducing JavaScript boilerplate. These directives enable real-time reactivity, form handling, and DOM manipulation - all from your Blade templates. Let's explore the most useful additions.

#1. wire:poll - Auto-Updating Components

The enhanced wire:poll directive now supports custom intervals and conditional refreshing:

<!-- Basic usage (updates every 2s) -->
<div wire:poll.2s>
    Last updated: {{ now()->format('H:i:s') }}
</div>

<!-- Conditional refreshing -->
<div wire:poll.500ms="shouldRefresh">
    Live stats will update when shouldRefresh=true
</div>

#2. wire:transition - Smooth Animations

New in Livewire 3.0, this handles CSS transitions without JavaScript:

<div 
    wire:transition
    wire:click="toggleShow"
    class="transition-all duration-300 {{ $show ? 'opacity-100' : 'opacity-0' }}"
>
    Content that fades in/out
</div>

#3. wire:confirm - Action Confirmation

Simplifies confirmation dialogs for destructive actions:

<button 
    wire:confirm="Are you sure you want to delete this post?"
    wire:click="deletePost"
>
    Delete Post
</button>

#4. wire:model.lazy.debounce - Advanced Form Handling

Combined modifiers for optimized form inputs:

<input 
    type="text" 
    wire:model.lazy.debounce.500ms="search" 
    placeholder="Search..."
>
<!-- Updates only after 500ms of inactivity AND on blur -->

#5. wire:navigate.hover - Smart Preloading

New navigation optimization directive:

<a 
    href="/dashboard" 
    wire:navigate.hover
    wire:navigate.progress
>
    Dashboard (preloads on hover)
</a>

#Practical Example: Live Search Component

Combine multiple directives for powerful functionality:

<div>
    <input 
        type="text" 
        wire:model.debounce.300ms="query"
        wire:loading.class="bg-gray-100"
        placeholder="Search users..."
    >

    <div wire:loading>Searching...</div>

    <ul wire:transition>
        @foreach($users as $user)
            <li wire:key="user-{{ $user->id }}">
                {{ $user->name }}
                <button 
                    wire:confirm="Delete {{ $user->name }}?"
                    wire:click="deleteUser({{ $user->id }})"
                >
                    Delete
                </button>
            </li>
        @endforeach
    </ul>
</div>

#Performance Considerations

1. wire:poll vs wire:stream: Use stream for true real-time (WebSockets) and poll for periodic updates
2. Debounce values: 300-500ms is ideal for most search inputs
3. Preloading: wire:navigate.hover reduces perceived load times by 40-60%

#Comparison Table: New vs Old Directives

#Conclusion

Livewire 3.0's new directives eliminate approximately 70% of the JavaScript typically needed for interactive applications. By leveraging these directives, you can:

• Build real-time features with minimal code
• Create smoother user experiences
• Maintain better performance
• Reduce frontend complexity

composer require livewire/livewire:^3.0

Pro Tip: Combine these with Laravel's new @script directive for when you truly need JavaScript sprinkles.