Livewire Tips & Tricks - Laravel
Tags: php, laravel, webdev, programming
Published: 2022-04-16 17:16:47

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

```php
// 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
php artisan make:livewire Folder/Component
// or
php artisan make:livewire folder.component
```

- Components in non-default Folder

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

- Easily Rename or Move Components

```php
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
php artisan livewire:stubs

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

- Don't Create a Method Just to Set Value

```php
<button wire:click="showText">Show</button>
```
And then
```php
class Show extends Component
{
    public $showText = false;
 
    public function showText() {
        $this->showText = true;
    }
}
```
Here's the code
```php
<button wire:click="$set('showText', true)">Show</button>
```

- Customize Validation Attributes

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

- Loading Indicators

```php
<div>
    <button wire:click="checkout">Checkout</button>
 
    <div wire:loading>
        Processing Payment...
    </div>
</div>

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

- Offline Indicator

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

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

- Pagination with Bootstrap Framework

```php
class ShowPosts extends Component
{
    use WithPagination;
 
    protected $paginationTheme = 'bootstrap';
```

- No Mount: Automatic Route-Model Binding

```php
class ShowPost extends Component
{
    public $post;
 
    public function mount(Post $post)
    {
        $this->post = $post;
    }
}

class ShowPost extends Component
{
    public Post $post;
}
```

- Delete Confirm Modal

```php
<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.