What's new in Livewire v4

Exciting New Features in Livewire 4

With the upcoming release of Livewire 4, developers can look forward to a host of exciting new features.

In this article, we will explore some of the standout features coming in Livewire 4, including component slots, component attributes and a new view-first, single file approach system.

1. New View-First System

Livewire 4 introduces a new view-first system, where components can be defined in a single file. This change promotes a clearer structure where the HTML and PHP logic can coexist seamlessly.

Single file components

Livewire components will no longer have their own livewire directory, but will rather live together with your other components in resources/views/components . Apart from that, all livewire components will now have a .wire.php suffix. For example a counter component could be located in resources/views/components/counter.wire.php .

@php
new class extends Livewire\Component {
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
}
@endphp

<div>
    Count: {{ $count }}

    <button wire:click="increment">Increment</button>
</div>

External components

Those who prefer to have a separate class for their Livewire component can still do so by referencing the component class at the top of the Livewire component:

@php(new \App\Livewire\Components\Counter)

<div>
    Count: {{ $count }}

    <button wire:click="increment">Increment</button>
</div>

For more information, check out the Livewire 4 roadmap linked at the end of the article.

2. Component Slots

One of my personally most anticipated features in Livewire 4 is the support for blade-like component slots.

Up until now, Livewire components did not support slots of any kind. Any data had to be passed through properties, which was not always pleasant to work with.

In Livewire 4, we can presume we will get some kind of support for both default component slots and named component slots, similar to blade component slots.

Default slots

// Livewire v3
<wire:modal title="Create" />

// Livewire v4
<wire:modal>Create</wire:modal>

This is how the Livewire component itself might look like:

// modal.wire.php

@php
new class extends Livewire\Component {
    public $isOpen = false;

    public function toggle()
    {
        $this->isOpen = ! $this->isOpen;
    }
}
@endphp

<div wire:show="isOpen">
    <button wire:click="toggle">Close</button>

    {{ $slot }}
</div>

Named slots

For named slots, we could see something like the following syntax:

<wire:modal>
    <wire:slot name="header">
        <h1>Create post</h1>
    </wire:slot>

    <form>
        <input wire:model="title">
        @if ($saved) Form saved successfully! @endif
    </form>
</wire:modal>

// modal.wire.php

@php
new class extends Livewire\Component {
    public $isOpen = false;

    public function toggle()
    {
        $this->isOpen = ! $this->isOpen;
    }
}
@endphp

<div wire:show="isOpen">
    @if ($header = $slot('header'))
        {{ $header }}
    @endif

    <button wire:click="toggle">Close</button>

    {{ $slot }}
</div>

For more information, check out the Livewire 4 roadmap linked at the end of the article.

3. Component Attributes

Another significant feature in Livewire 4 is the added support for component attributes.

This feature allows developers to easily forward attributes directly to Livewire components, similarly to how blade components allow forwarding attributes.

This is a huge DX improvement, allowing you to easily pass CSS classes or HTML attributes to your components.

This is how such a component might look like:

@php
new class extends Livewire\Component {
    #[Prop]
    public string $type = 'info';
}
@endphp

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $slot }}
</div>

And here is how you could pass attributes to the component:

<!-- Usage -->
<wire:alert type="error" class="mb-4" id="error-alert" data-testid="alert">
    Something went wrong!
</wire:alert>

However, there are certain limitations, depending on the chosen final implementation. According to the available information at the time of the writing, attributes are captured on initial render and memoized. This means that later changes to the attributes will not be reflected in the child components.

For more information, check out the Livewire 4 roadmap linked at the end of the article.

Conclusion

The upcoming Livewire 4 is packed with a lot of awesome new features, further improving the already superb developer experience within the Laravel ecosystem.

Livewire 4 is set to be presented (and maybe even made available in some form) at Laracon US 2025. Stay tuned for further updates.

A lot of the examples and information found in this article are taken from the Livewire 4 roadmap. For detailed information about each upcoming feature and more, please check out the roadmap here.