wire:confirm | Confirmation Dialog in Laravel Livewire 3 | EP 17

In this post, I will show you how to open the confirmation dialog box using wire:confirm with laravel livewire 3.

In this example, we will show a list of users with a delete button. When a user clicks the delete button, a confirmation prompt will appear before deleting the user using the `wire:confirm` directive. Let's go through the example step by step.

Step 1: Create Users Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire Users

Now they created files on both paths:

app/Livewire/Users.php
   
resources/views/livewire/users.blade.php

Now, both files we will update as below for our contact us form.

app/Livewire/Users.php

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;

class Users extends Component
{
    use WithPagination;

    protected $paginationTheme = "bootstrap";

    public function render()
    {
        return view('livewire.users', [
            "users" => User::paginate(8)
        ]);
    }

    public function delete($id)
    {
        User::find($id)->delete();
    }
}

resources/views/livewire/users.blade.php

<div>

    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
                <td>
                    <button 
                        wire:click="delete({{ $user->id }})"
                        wire:confirm="Are you sure want to remove this user?"
                        class="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{ $users->links() }}
</div>

Step 2: Use Livewire Component

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Users') }}</div>

                <div class="card-body">
                    <livewire:users />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Let's see the video:

I hope it can help you...