Livewire Tips & Tricks - Laravel

// 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
}

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

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

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

php artisan livewire:stubs

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

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

class Show extends Component
{
    public $showText = false;

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

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

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

    // ...

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

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

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

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

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

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

class ShowPost extends Component
{
    public $post;

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

class ShowPost extends Component
{
    public Post $post;
}

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