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.
Top comments (0)