[ad_1]
Laravel Livewire is a great tool to achieve dynamic behavior on a web page, without directly writing JavaScript code. It makes building dynamic interfaces simple, without leaving the comfort of Laravel. Recently, Livewire core has been completely rewritten.
The new Livewire v3 has better diffing, features can be built faster, and there is less duplication between Livewire and Alpine because it relies more on Alpine and uses its Morph, History, and other plugins. Several of the new features were also made possible by restructuring the codebase and placing a greater emphasis on Alpine.
1. Inject Livewire Scripts, Styles, and Alpine Automatically
After composer installing Livewire v2, you must manually add @livewireStyles, @livewireScripts, and Alpine to your layout. With Livewire v3, you just need to install Livewire and everything you need is automatically injected – including Alpine!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
...
</body>
</html>
2. JavaScript Functions in PHP classes
Livewire v3 will support writing JavaScript functions directly in your backend Livewire components. Add a function to your component, add a /\*_ @js _/ comment above the function, then return some JavaScript code using PHP’s HEREDOC syntax and call it from your frontend. The JavaScript code will be executed without sending any requests to your backend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
public $todos;
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>
3. Locked Properties
Livewire v3 will support locked properties – properties that cannot be updated from the frontend. Add a /\*\* @locked / comment above a property on your component, and Livewire will throw an exception if someone attempts to update that property from the frontend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
public $todos = [];
}
?>
4. Wire:model Is Deferred by Default
As Livewire and its usage have evolved, we’ve realized that the “deferred” behavior makes more sense for 95% of forms, so in v3 “deferred” functionality will be the default. This will save on unnecessary requests going to your server and improve performance. When you need the “live” functionality on an input, you may use wire:model.live to enable that functionality.
This is one of the very few breaking changes from v2 to v3.
5. Requests Are Batched
In Livewire v2, if you have multiple components using wire:poll or dispatching and listening for events, each one of those components will send separate requests to the server on each poll or event. In Livewire v3, there is intelligent batching of requests so that wire:polls, events, listeners, and method calls can be batched into one request when possible, saving even more requests and improving performance.
6. Reactive Properties
In Livewire v3, when you pass a piece of data to a child component , add a /\*_ @prop _/ comment above the property in the child, then update it in the parent component, it will be updated in the child component.
<?php
namespace App\Http\Livewire;
class TodosCount extends \Livewire\Component{
public $todos;
public function render(){
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
7. Access Parent Component’s Data and Methods Using $parent
In Livewire v3, there will be a new way to access a parent component’s data and methods. There’s a new $parent property that can be accessed to call methods on the parent.
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component{
public $value = '';
public function render(){
return <<<'HTML'
<div>
<input wire:model="value" wire:keydown.enter="$parent.add()">
</div>
HTML;
}
}
8. Teleport
Livewire v3 will also include a new @teleport Blade directive that will allow you to “teleport” a piece of markup and render it another part of the DOM. This can sometimes help avoid z-index issues with modals and slideouts.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
</div>
9. Lazy Components
In Livewire v3, just add a lazy attribute when rendering a component, and it won’t be rendered initially. When it comes into the viewport, Livewire will fire off a request to render it. You’ll also be able to add placeholder content by implementing the placeholder method on your component.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<livewire:example-component lazy />
</x-modal>
</div>
<?php
namespace App\Http\Livewire;
Class ExampleComponent extends \Livewire\Component{
public static function placeholder(){
return <<<'HTML'
<x-spinner />
>>>
}
public function render() {
return <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>
Simplicity and Power in Livewire V3
The combination of simplicity and power is what makes Laravel Livewire so awesome and why it is used by so many developers. It is especially a good alternative to the Laravel + Inertia + Vue combination. In particular Laravel is also bundled up with other frameworks which are powerful and to work with.
[ad_2]