Laravel Livewire is a great tool to achieve dynamic behavior on the page, without directly writing JavaScript code. And, like any tool, it has a lot of "hidden gems", both in its official docs, and practical extra tips provided by developers. I decided to compile some of them in this article. Let's get into it!
1.No render() needed
A typical render() method looks something like this:
// app/Http/Livewire/PostsShow.php
class PostsShow extends Component
{
public function render()
{
return view('livewire.posts-show');
}
}But if your render() method is just a one-line to render the default view, you may delete that render() method from the component and it will all still work, loading the default render() from the vendor's method.
class PostsShow extends Component
{
// This empty component will still work and load the Blade file
}2.Components in Subfolders
If you want to generate a component in a subfolder, like app/Http/Livewire/Folder/Component.php, you have two ways how to do it:
php artisan make:livewire Folder/Componentor
php artisan make:livewire folder.componentNotice that the first way is with the first letter uppercase, and the second way is lowercase.In both cases, there will be two files generated:
- app/Http/Livewire/Folder/Component.php
- resources/views/livewire/folder/component.blade.php
The subfolders will be created automatically if they don't exist.
3. Components in non-default Folder
If you use some external package with Livewire components, you may have your Livewire component in a different folder than the default app/Http/Livewire.Then, you may need to bind its name to the actual location.
Typically, it's done in app/Providers/AppServiceProvider.php (or in any service provider) method boot():
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
Livewire::component('shopping-cart', \Modules\Shop\Http\Livewire\Cart::class);
}
}4. Easily Rename or Move Components
If you made a typo while generating the component with make:livewire, don't worry.You don't need to rename two files manually, there's a command for that.
For example, if you wrote php artisan make:livewire Prduct, but instead you want "Product", and also decided to put it into a subfolder, you can follow up with this command:
php artisan livewire:move Prduct Products/ShowThe result will be this:
COMPONENT MOVED
CLASS: app/Http/Livewire/Prduct.php
=> app/Http/Livewire/Products/Show.php
VIEW: resources/views/livewire/prduct.blade.php
=> resources/views/livewire/products/show.blade.php5.
9.Customize Validation Attributes
One of the main criticism of Livewire is the fact that it does too many requests to the server. If you have wire:model on the input field, each keystroke would potentially call the server to re-render the component.It's very convenient if you have some real-time effects, like "live search". But generally, server requests may be quite expensive, in terms of performance.
php artisan livewire:stubs6.Don't Create a Method Just to Set Value
9.Customize Validation Attributes
<?php
namespace [namespace];
use Livewire\Component;
class [class] extends Component
{
public function render()
{
return view('[view]');
}
}One of the main criticism of Livewire is the fact that it does too many requests to the server. If you have wire:model on the input field, each keystroke would potentially call the server to re-render the component.It's very convenient if you have some real-time effects, like "live search". But generally, server requests may be quite expensive, in terms of performance.
7.Step Even Further: Set True/False Value Easily
9.Customize Validation Attributes
<button wire:click="showText">Show</button>One of the main criticism of Livewire is the fact that it does too many requests to the server. If you have wire:model on the input field, each keystroke would potentially call the server to re-render the component.It's very convenient if you have some real-time effects, like "live search". But generally, server requests may be quite expensive, in terms of performance.
class Show extends Component
{
public $showText = false;
public function showText() {
$this->showText = true;
}
}7.Step Even Further: Set True/False Value Easily
9.Customize Validation Attributes
<button wire:click="$set('showText', true)">Show</button>One of the main criticism of Livewire is the fact that it does too many requests to the server. If you have wire:model on the input field, each keystroke would potentially call the server to re-render the component.It's very convenient if you have some real-time effects, like "live search". But generally, server requests may be quite expensive, in terms of performance.
11.Offline Indicator
9.Customize Validation Attributes
<button wire:click="$toggle('showText')">Show/Hide</button>One of the main criticism of Livewire is the fact that it does too many requests to the server. If you have wire:model on the input field, each keystroke would potentially call the server to re-render the component.It's very convenient if you have some real-time effects, like "live search". But generally, server requests may be quite expensive, in terms of performance.
11.Offline Indicator
<div x-data="{ open: false }">
<button @click="open = true">Expand</button>
<span x-show="open">
Content...
</span>
</div>9.Customize Validation Attributes
Livewire validation works very similarly to the Laravel validation engine, but with a few differences. In Laravel, if you want to customize the names of the attributes, you may define the attributes() method in a Form Request class.
11.Offline Indicator
-
wire:model.debounce: by default, Livewire waits for 150ms after the keystroke on the input, before performing the request to the server. But you can override it:<input type="text" wire:model.debounce.1000ms="propertyName"> -
wire:model.lazy: by default, Livewire is listening for all events on the input, and then performs the server requests. By providing alazydirective, you tell Livewire to listen only to thechangeevent. It means that the user may keep typing and changing the value, and the server request will be fired only when the user clicks away from that field. -
wire:model.defer: this will not fire the server requests on the change of the input. It will save the new value internally and will pass it to the next network request, which may come from other input fields or other button clicks.
13.No Mount: Automatic Route-Model Binding
In practice, I like to show such loading indicators only if it takes a while. No point in re-rendering the DOM every time, in every possible case.What if we do it only if the request takes more than 500ms?
class ContactForm extends Component
{
protected $validationAttributes = [
'email' => 'email address'
];
// ...Similar to Laravel, Livewire uses pagination styling from the Tailwind framework, by default.Luckily, it's easy to override, just provide the different value to the property:
11.Offline Indicator
13.No Mount: Automatic Route-Model Binding
<div>
<button wire:click="checkout">Checkout</button>
<div wire:loading>
Processing Payment...
</div>
</div>Then, somewhere in Blade, you have @livewire('show-post', $post).
<div wire:loading.delay.longer>...</div>Similar to Laravel, Livewire uses pagination styling from the Tailwind framework, by default.Luckily, it's easy to override, just provide the different value to the property:
13.No Mount: Automatic Route-Model Binding
<div wire:offline>
You are now offline.
</div>Then, somewhere in Blade, you have @livewire('show-post', $post).
<div wire:offline.class="bg-red-300"></div>class ShowPosts extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';class ShowPost extends Component
{
public $post;
public function mount(Post $post)
{
$this->post = $post;
}
}class ShowPost extends Component
{
public Post $post;
}<button wire:click="delete($post->id)"
onclick="return confirm('Are you sure?')">Delete</button><button onclick="confirm('Are you sure?') || event.stopImmediatePropagation()"
wire:click="delete($post->id)">Delete</button>
