How to use confirm dialogs in a Laravel Nova Tool

Almost all web apps need a dashboard. And we developers make CRUDs for users, products, employees etc. Even thought the fields changes, we are doing repeating too many steps in the process. So the idea is to generalise those steps and code only the login which is unique to an entity. Laravel Nova is amazing contribution from Laravel.

While I was developing with Laravel Nova, I came across a requirement I need to implement a confirm dialog modal in a Nova Tool and execute a logic when user click confirm button. It was bit tricky for me as a beginner. But I figured it out.

I created a Nova tool, so now I have this code of tool in nova-components folder. The component of the tool is Tool.vue.

So what I did is, I just created another component is the same folder named CustomModal.vue with the following code:

I just made this component visible to show the modal. You can write the logic in the methods handleConfirm() and handleClose().

In handleConfirm(), you can create a Ajax call to the tool’s API in routes/api.php inside tool’s code. In that API you can setup the logic to run on confirming the dialog modal.

In handleClose(), you can emit a close event and this event can be listened from the parent component and this modal can be hidden on cancel.

Now, you try it in your code and see if it works for you. If you have any doubts feel free to ask in comment section.

Love this article? Click here to buy me a coffee :)