Sweetalert

SweetAlert2 provides beautiful, customizable, and accessible popups. For more details

Installing via npm
npm install sweetalert2

import vue-sweetalert2 and sweetalert2.min.css in main.js file

import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'
<template>
  <a href="#" class="btn btn-danger-subtle rounded p-1 lh-1"  data-extra-toggle="delete" data-closest-elem=".item" @click="deleterequest">
    <i class="material-symbols-outlined font-size-14">
      close
    </i>
  </a>
</template>
Script

deleterequest() {
  const swalWithBootstrapButtons = this.$swal.mixin({
    customClass: {  
      confirmButton: "btn btn-primary btn-lg",
      cancelButton: "btn btn-outline-primary btn-lg ms-2",
    },
    buttonsStyling: false,
  });

  swalWithBootstrapButtons
    .fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, delete it!",
      showClass: {
        popup: "animate__animated animate__zoomIn",
      },
      hideClass: {
        popup: "animate__animated animate__zoomOut",
      },
    })
    .then((willDelete) => {
      if (willDelete.isConfirmed) {
        swalWithBootstrapButtons.fire({
          title: "Deleted!",
          text: "Your Request has been deleted.",
          icon: "success",
          showClass: {
            popup: "animate__animated animate__zoomIn",
          },
          hideClass: {
            popup: "animate__animated animate__zoomOut",
          },
        });
      } else {
        swalWithBootstrapButtons.fire({
          title: "Your Request is safe!",
          showClass: {
            popup: "animate__animated animate__zoomIn",
          },
          hideClass: {
            popup: "animate__animated animate__zoomOut",
          },
        });
      }
    }); 
  },
Previous Source & Credits