DEV Community

Morcos Gad
Morcos Gad

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode
  • Components in Subfolders
php artisan make:livewire Folder/Component
// or
php artisan make:livewire folder.component
Enter fullscreen mode Exit fullscreen mode
  • Components in non-default Folder
class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Livewire::component('shopping-cart', \Modules\Shop\Http\Livewire\Cart::class);
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Change Default Component Templates
php artisan livewire:stubs

// You will find a new folder /stubs with a few files
Enter fullscreen mode Exit fullscreen mode
  • Don't Create a Method Just to Set Value
<button wire:click="showText">Show</button>
Enter fullscreen mode Exit fullscreen mode

And then

class Show extends Component
{
    public $showText = false;

    public function showText() {
        $this->showText = true;
    }
}
Enter fullscreen mode Exit fullscreen mode

Here's the code

<button wire:click="$set('showText', true)">Show</button>
Enter fullscreen mode Exit fullscreen mode
  • Customize Validation Attributes
class ContactForm extends Component
{
    protected $validationAttributes = [
        'email' => 'email address'
    ];

    // ...
Enter fullscreen mode Exit fullscreen mode
  • Loading Indicators
<div>
    <button wire:click="checkout">Checkout</button>

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

// Easy
<div wire:loading.delay.longer>...</div>
Enter fullscreen mode Exit fullscreen mode
  • Offline Indicator
<div wire:offline>
    You are now offline.
</div>

<div wire:offline.class="bg-red-300"></div>
Enter fullscreen mode Exit fullscreen mode
  • Pagination with Bootstrap Framework
class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • Delete Confirm Modal
<button onclick="confirm('Are you sure?') || event.stopImmediatePropagation()"
        wire:click="delete($post->id)">Delete</button>

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)