Creating a Confirmation Dialog with Livewire: A Step-by-Step Guide

Livewire is a full-stack framework for Laravel that simplifies the creation of dynamic interfaces without leaving Laravel.

The ability to construct confirmation dialogs with little to no code and without JavaScript is one of Livewire's features.

I'll walk you through the process of creating a confirmation dialog using Livewire in a few simple steps in this blog post using the new 'wire:confirm' HTML directive that makes it easier than ever to add a confirmation dialog before performing an important or dangerous action.

Install Livewire

To use Livewire, you need to install it in your Laravel project. You can do this by running the following command in your terminal:

composer require livewire/livewire

This will install Livewire as a dependency and publish its assets and configuration files.

You can also optionally run the following command "php artisan livewire:publish --config" to publish the Livewire config file, which allows you to customize some of the settings.

Using the new wire:confirm' makes adding the confirmation dialog box to your app super easy.

You can use the wire:confirm for a straightforward confirmation that has a "Cancel" and "OK" button, coupled with an event like wire:click:

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

Livewire will launch a native browser confirmation popup when you click the button.

Things become a little more interesting if you ask the user to input something to verify that they want to do something catastrophic on purpose.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

The '|DELETE' lets Livewire know the expected prompt to match.

When the button is clicked, a 'prompt()' modal will appear and ask the user to write "DELETE." Should the user's input correspond, the Livewire component's 'delete()' method will be called.

The confirmation word or phrase could be changed to reflect a dynamic value on the component. For instance, you might wish to require the user to provide the project name in order to verify:

I reasoned that making everything uppercase would be the easiest because there is a caveat: the text matching is case-sensitive. You must use HTML entities in the 'wire:confirm' attribute if you wish to use quotes like I am demonstrating.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType &quot;{{ str($project_name)->upper() }}&quot; to confirm|{{ str($project_name)->upper() }}"
    >
        Delete this project
    </button>
</div>

Why Should You Use the Livewire 'wire:confirm' HTML Directive?

If you are looking for a simple and effective way to add a confirmation dialog before performing an important or dangerous action on your web page, you should consider using the wire:confirm HTML directive.

This directive is part of the Livewire framework, which is a library that makes it easy to build dynamic and interactive web applications using Laravel.

The wire:confirm directive allows you to specify a message that will be displayed in a native browser modal when the user clicks on an element that has a Livewire action attached to it.

For example, if you have a button that deletes a record from the database, you can add wire:confirm="Are you sure you want to delete this?" to the button element, and the user will see a dialog asking them to confirm their action before the Livewire action is triggered.

This way, you can prevent accidental or malicious actions from happening, and provide more context and clarity to the user about what they are doing.

The wire:confirm directive has several advantages over other methods of adding confirmation dialogs, such as using JavaScript or custom components.

First, it uses the native browser 'Window.confirm' modal, which is simple and consistent across different browsers and platforms.

You don’t have to worry about styling, compatibility, or performance issues.

Second, it is very easy to use and requires minimal code.

You just have to add the directive and the message to the element, and Livewire will handle the rest.

Third, it integrates seamlessly with the Livewire framework, which means you can use it with any Livewire action, such as wire:click, wire:submit, or wire:model.

Conclusion

The wire:confirm directive is a great tool for adding confirmation dialogs to your web page. It is simple, effective, and convenient to use.

It can help you improve the user experience and the security of your web application.

If you want to learn more about the wire:confirm directive and the Livewire framework, you can visit the official documentation or the GitHub repository.

I hope this note has convinced you to give it a try. 😊