Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. Laravel livewire v2.6.0 has been released with massive bug fixes and new features. So in this article, I will share some new features and updates with you.

Support Wireable Objects (DTOs)

Dan Harrin finally introduces support for custom DTO public properties in Livewire! Now Livewire offers support for Wireable objects, which allows any object to be persisted between Livewire requests. Some use case ideas for this feature are following:

• Custom DTOs, commonly used in PHP development in general.
• Persisting unsaved Eloquent models between requests (implementing the interface on the model, and then serializing/unserializing from the $attributes property).
• Any other class you might want to persist and use in Livewire.

This feature even supports wire:modelling to a property in the custom object, using model-style dot syntax!

Usage

1. Implement the Livewire\Wireable interface on the custom class.
2. Set up toLivewire() and fromLivewire() methods on the class, which serializes it to and from an array.
3. Add the type of the custom class to the component’s public property, like you would for a model.

Example

class Component extends \Livewire\Component
{
    public DTO $dto;
    public function mount()
    {
        $this->dto = new DTO('Message');
    }
}

use Livewire\Wireable;
class DTO implements Wireable
{
    public $message;
    public function __construct($message)
    {
        $this->message = $message;
    }

    public function toLivewire()
    {
        return [
            'message' => $this->message,
        ];
    }

    public static function fromLivewire($value): self
    {
        return new self($value['message']);
    }
}

You can now use the $dto in your Livewire view and even bind to it with wire:model.

<div>
    <span>{{ $dto->message }}</span>

    <input wire:model="dto.message" />
</div>

This pattern is incredibly flexible, and (in theory) you can now use any PHP class in any state with Livewire!

Deep nested model binding feature

joshhanley introduces deep nested model binding support to Livewire.
which allows us to bind to deep relations, for example, the below rule and binding would work:

protected $rules = [
'user.posts.*.comments.*.message' => 'required'
];

<input wire:model="user.posts.0.comments.0.message" />

Added the possibility to choose the directory for stubs

Dominique Thomas comes up with a new feature that allows you to manage several stubs and it enables them to be stored in folders for your projects or packages. So now you can call the artisan command livewire: make with a new option, –stub. With this feature, you can put the path of a folder in the ‘stubs’ folders of Laravel.
For example

php artisan livewire:make MyComponent --stubs=type1
php artisan livewire:make MyButton --stubs=CTAButton

//For a package
php artisan livewire:make MyComponent --stubs=../vendor/packageVendor/packageName/myStubFolder

It is a very useful feature that enables you to create several types of precomponent.

Custom query params & clean query strings

Jani Gyllenberg introduces a unique feature in Laravel Livewire that cleans up the encoding/readability of query strings.
In this example, a public
$filters property is utilized and specified as a $queryString property:

public $filters = [
    'make' => [],
    'model' => [],
    ...
];

public $queryString = ['filters'];

Query strings Before V2.6:

?filters%5Bmake%5D%5B0%5D=Tesla&filters%5Bmake%5D%5B1%5D=VW

Query strings After V2.6:

?filters[make][0]=Tesla&filters[make][1]=VW

Better support for anonymous blade component layouts

Livewire enables you to render components as entire pages by simply passing them into your route definition like so:

1Route::get('/...', YourLivewireComponent::class);

By default, Livewire looks for a Blade layout component called: x-layouts.app.
This is a reasonable default for people using Laravel Jetstream or people who acknowledge this pattern as a general Laravel app convention.
However, when you configure your own layout there are some new things that you need to know.
You can now use anonymous components as your layout component.
You can pass an FQCN (Full Class Name) to Livewire’s livewire.layout config instead of just the component name.
The $attributes bag will now always be available to layout components.

Support adding or removing public properties between deploys

Livewire now provides support for adding or removing public properties between deploys. This is one of those tricky little problems that many users have encountered which is not technically a bug (but totally is because it causes people errors in their apps).

These are the certain situations in which a person can encounter this problem. The state of the initial render of a livewire component may become out of sync with the endpoint delivering the component’s subsequent state. This may be due to the initial page being full-page cached at the edge, or could be the result of a browser aggressively caching certain pages, or could be a user initially rendered a page and the server software was updated. In situations where properties were added to or removed from the Livewire component, the Response::toSubsequentResponse() method would be checking for a non-existent key which would, in turn, produce a PHP error of ErrorException: Undefined array key xxxx. This can, and arguably should be mitigated in the Response method when checking for the dirty state, So this is the route where this particular fix has taken.

There are a lot of other new updates and bug fixes in this release, If you want to explore them you can visit this link.

Note: We are highly results-driven professionals having experience in the arenas of web application development especially in laravel. So If you want to create a website with Laravel and Laravel Livewire you can contact us or Start a project with us.

We will convert your ideas into reality. We don’t say we are the best, we prove it.