How do you use confirm dialogues in a custom Laravel Nova tool? How do you use confirm dialogues in a custom Laravel Nova tool? laravel laravel

How do you use confirm dialogues in a custom Laravel Nova tool?


You can use <modal> component whenever you want.

Here is how it work internally in Nova: https://gist.github.com/sanasol/fa7441ceb4da9c6c71f9586ec1d04a5a

Here is simplified example: https://gist.github.com/sanasol/b3790b8041fb2dfaa0a5b921ff46f5f3


  • You need to create a new component in the same folder of Tool.vue
  • I'll attach the component I used here
  • Then in the "handleConfirm" method, you can add a Ajax call to API
  • You can add you logic in that API.
  • You can find the API file in path, ToolName/routes/api.php
/* CustomModal.vue */<template>   <modal tabindex="-1" role="dialog" @modal-close="handleClose">       <form @keydown="handleKeydown" @submit.prevent.stop="handleConfirm" class="bg-white rounded-lg shadow-lg overflow-hidden w-action">           <div>               <heading :level="2" class="border-b border-40 py-8 px-8">Confirm action</heading>               <p class="text-80 px-8 my-8"> Are you sure you want to perform this action? </p>           </div>           <div class="bg-30 px-6 py-3 flex">               <div class="flex items-center ml-auto">                   <button type="button" @click.prevent="handleClose" class="btn btn-link dim cursor-pointer text-80 ml-auto mr-6">                       Cancel                   </button>                   <button :disabled="working" type="submit" class="btn btn-default btn-primary">                       <loader v-if="working" width="30"></loader>                       <span v-else>Confirm</span>                   </button>               </div>           </div>       </form>   </modal></template><script>export default { methods: {   handleConfirm() {     // Here you can add an ajax call to API and you can add your logic there.   },   handleClose() {     // Logic to hide the component   }, },}</script>

For more detailed explanation : https://medium.com/vineeth-vijayan/how-to-use-confirm-dialogs-in-a-laravel-nova-tool-b16424ffee87