DEV Community

Morcos Gad
Morcos Gad

Posted on

Livewire Tips & Tricks - Laravel

#php #laravel #webdev #programming

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.

Top comments (0)