Overview Official Website

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.

Add Package
yarn add sweetalert2
Import Package
import Swal from 'sweetalert2';
Remove Package
yarn remove sweetalert2 (or you can remove package by removing specific package from package.json )
Examples:
Title Vue
A Basic Message 
Swal.fire({
    title: "Any fool can use a computer",
    confirmButtonColor: "#556ee6",
});
A Title with a Text Under 
 Swal.fire({
    title: "The Internet?",
    text: "That thing is still around?",
    icon: "question",
    confirmButtonColor: "#556ee6",
});
A Success message! 
Swal.fire({
    title: "Good job!",
    text: "You clicked the button!",
    icon: "success",
    confirmButtonColor: "#556ee6",
});
A warning message, with a function attached to the 'Confirm' button... 
Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#34c38f",
        cancelButtonColor: "#f46a6a",
        confirmButtonText: "Yes, delete it!"
    }).then(result => {
        if (result.value) {
            Swal.fire("Deleted!", "Your file has been deleted.", "success");
        }
});
By passing a parameter, you can execute something else for 'Cancel'. 
const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
        confirmButton: "btn btn-success",
        cancelButton: "btn btn-danger ml-2"
    },
    buttonsStyling: false
});
swalWithBootstrapButtons
    .fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel!",
        showCancelButton: true
    })
    .then(result => {
        if (result.value) {
            swalWithBootstrapButtons.fire(
                "Deleted!",
                "Your file has been deleted.",
                "success"
            );
        } else if (
            /* Read more about handling dismissals below */
            result.dismiss === Swal.DismissReason.cancel
        ) {
            swalWithBootstrapButtons.fire(
                "Cancelled",
                "Your imaginary file is safe :)",
                "error"
            );
        }
});
A message with a custom Image Header 
 Swal.fire({
    title: "Sweet!",
    text: "Modal with a custom image.",
    imageUrl: require("@/assets/images/logo-dark.png"),
    imageHeight: 20,
    confirmButtonColor: "#556ee6"
});
A message with auto close timer 
let timerInterval;
Swal.fire({
    title: "Auto close alert!",
    html: "I will close in  milliseconds.",
    timer: 2000,
    timerProgressBar: true,
    onBeforeOpen: () => {
        Swal.showLoading();
        timerInterval = setInterval(() => {
            Swal.getContent().querySelector(
                "b"
            ).textContent = Swal.getTimerLeft();
        }, 100);
    },
    onClose: () => {
        clearInterval(timerInterval);
    }).then(result => {
        if (
            /* Read more about handling dismissals below */
            result.dismiss === Swal.DismissReason.timer
        ) {
            console.log("I was closed by the timer"); // eslint-disable-line
    }
});
Custom HTML description and buttons 
Swal.fire({
    title: "HTML example",
    icon: "info",
    html:
        "You can use bold text, " +
        'links ' +
        "and other HTML tags",
    showCloseButton: true,
    showCancelButton: true,
    focusConfirm: false,
    confirmButtonText: ' Great!',
    confirmButtonAriaLabel: "Thumbs up, great!",
    cancelButtonText: '',
    cancelButtonAriaLabel: "Thumbs down",
    confirmButtonColor: "#34c38f",
    cancelButtonColor: "#f46a6a",
});
A custom positioned dialog 
Swal.fire({
    position: "top-end",
    icon: "success",
    title: "Your work has been saved",
    showConfirmButton: false,
    timer: 1500
});
A message with custom width, padding, and background 
Swal.fire({
    title: "Custom width, padding, background.",
    width: 600,
    padding: 100,
    confirmButtonColor: "#556ee6",
    background:
        "#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)"
});
Ajax request example 
Swal.fire({
    title: "Submit email to run ajax request",
    input: "email",
    showCancelButton: true,
    confirmButtonText: "Submit",
    showLoaderOnConfirm: true,
    confirmButtonColor: "#556ee6",
    cancelButtonColor: "#f46a6a",
    preConfirm: email => {
        // eslint-disable-next-line no-unused-vars
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                if (email === "taken@example.com") {
                    Promise.reject(new Error("This email is already taken."));
                } else {
                    resolve();
                }
            }, 2000);
        });
    },
    allowOutsideClick: false
}).then(email => {
    Swal.fire({
        title: "Ajax request finished!",
        html: "Submitted email: " + email,
        confirmButtonColor: "#556ee6",
    });
}).catch(error => {
    console.log(error);
})
Dynamic queue example 
Swal.fire([
    {
        title: "Your public IP",
        confirmButtonColor: "#556ee6",
        confirmButtonText: "Show my public IP",
        text: "Your public IP will be received " + "via AJAX request",
        showLoaderOnConfirm: true,
        preConfirm: () => {
            return fetch(ipAPI)
                .then(response => response.json())
                .then(data => Swal.insertQueueStep(data.ip))
                .catch(() => {
                    Swal.insertQueueStep({
                        type: "error",
                        title: "Unable to get your public IP"
                    });
                });
        }
    }
]);
© Skote.