Discover What’s New in Livewire 4 Update

Taylor Keatsman

ago 1 hour

Discover What’s New in Livewire 4 Update

Livewire 4 has officially launched, presenting the most significant upgrades to date. This version emphasizes improved defaults, reduced complexity, and enhanced tools for developers. After months of refinement, Livewire now aims to transform how developers approach component creation.

Key Features of Livewire 4 Update

Single-File Components

The standout feature of Livewire 4 is the introduction of single-file components. Developers can create components using both PHP and Blade in one file:

resources/views/components/⚡counter.blade.php 
use LivewireComponent; 
new class extends Component { 
    public $count = 0; 
    public function increment() { 
        $this->count++; 
    } 
};

Now, when you create new components using the command php artisan make:livewire, files will feature a lightning bolt emoji, making them easy to identify in your directory.

Enhanced Routing

Routing improvements allow developers to reference components more intuitively. The revised syntax is:

Route::livewire('/posts/create', 'pages::post.create');

This change enables a more seamless integration of components within the application structure.

Application Structure and Namespaces

Livewire 4 introduces a clearer structure with default namespaces for components:

pages:: for page components
layouts:: for layout components
All other components go in resources/views/components

Additionally, developers can create custom namespaces to better suit modular applications.

Integrated JavaScript and CSS

Components now allow for integrated JavaScript and CSS scripts. Simply add these elements directly into the component’s template:

This design ensures styles remain scoped to individual components, preventing cross-component interference.

Islands Feature

The ‘Islands’ feature is a major highlight of this update, allowing for isolated regions within components that can refresh independently. This optimizes performance by ensuring that only data relevant to the island is fetched during updates:

 @island Revenue: {{ $this->revenue }}  
 @endisland

Additional Improvements

Support for drag-and-drop functionality without external libraries.
Smooth transitions utilizing the browser’s View Transitions API for enhanced user experience.
Optimistic UI features provide immediate updates without waiting for network requests.
Loading states are automatically managed for better user feedback during requests.

Upgrading to Livewire 4

Livewire 4 maintains backwards compatibility, ensuring existing components will function without issues. The newest format is recommended for all new components. Developers interested in exploring this update can require it via: