Livewire Tips & Tricks - Laravel

I found this wonderful article https://laravel-news.com/laravel-livewire-tips-and-tricks that contains a lot of tips, specifically 14 tips that will help you In smooth dealing with Livewire and help you in your next projects.

• No render() needed

// app/Http/Livewire/PostsShow.php
class PostsShow extends Component
{
    public function render()
    {
        return view('livewire.posts-show');
    }
}

// just a one-line to render the default view
class PostsShow extends Component
{
    // This empty component will still work and load the Blade file
}

• Components in Subfolders

php artisan make:livewire Folder/Component
// or
php artisan make:livewire folder.component

• Components in non-default Folder

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Livewire::component('shopping-cart', \Modules\Shop\Http\Livewire\Cart::class);
    }
}

• Easily Rename or Move Components

php artisan livewire:move Prduct Products/Show

// The 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.php

• Change Default Component Templates

php artisan livewire:stubs

// You will find a new folder /stubs with a few files

• Don't Create a Method Just to Set Value

<button wire:click="showText">Show</button>

And then

class Show extends Component
{
    public $showText = false;

    public function showText() {
        $this->showText = true;
    }
}

Here's the code

<button wire:click="$set('showText', true)">Show</button>

• Customize Validation Attributes

class ContactForm extends Component
{
    protected $validationAttributes = [
        'email' => 'email address'
    ];

    // ...

• Loading Indicators

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading>
        Processing Payment...
    </div>
</div>

// Easy
<div wire:loading.delay.longer>...</div>

• Offline Indicator

<div wire:offline>
    You are now offline.
</div>

<div wire:offline.class="bg-red-300"></div>

• Pagination with Bootstrap Framework

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

• No Mount: Automatic Route-Model Binding

class ShowPost extends Component
{
    public $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }
}

class ShowPost extends Component
{
    public Post $post;
}

• Delete Confirm Modal

<button onclick="confirm('Are you sure?') || event.stopImmediatePropagation()"
        wire:click="delete($post->id)">Delete</button>

That event.stopImmediatePropagation() will stop the Livewire method from being called, if the confirmation result is false.
You may find a few other possible solutions in
https://github.com/livewire/livewire/issues/366

I tried to present some basic points, but to go deeper, visit the source.
I hope you enjoyed with me and I adore you who search for everything new.