Sweetalert2

  1. Advance UI
  2. Sweetalert2
Overview Official Website

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

Import Package
import Swal from "sweetalert2";
Add Package
yarn add sweetalert2 --save
Remove Package
yarn remove sweetalert2 Or you can remove package by removing specific package from package.json .
Examples
Title Example
A Basic Message 
showAlert() {
    Swal.fire("Any fool can use a computer!");
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A Title with a Text Under 
showAlert() {
    Swal.fire("The Internet?", "That thing is still around?", "question");
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A Success message! 
showAlert() {
    Swal.fire("Good job!", "You clicked the button!", "success");
}
<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A Modal with a title, an error icon, a text, and a footer 
showAlert() {
    Swal.fire({
        title: "Oops...",
        text: "Something went wrong!",
        icon: "error",
        confirmButtonClass: "btn btn-primary w-xs mt-2",
        buttonsStyling: false,
        footer: 'Why do I have this issue?',
        showCloseButton: true,
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A Modal window with a long content inside 
showAlert() {
    Swal.fire({
        imageUrl: "https://placeholder.pics/svg/300x1500",
        imageHeight: 1500,
        imageAlt: "A tall image",
        confirmButtonClass: "btn btn-primary w-xs mt-2",
        buttonsStyling: false,
        showCloseButton: true,
    });
}
<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A Warning message, with a function attached to the "Confirm"-button... 
showAlert() {
    Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#34c38f",
        cancelButtonColor: "#f46a6a",
        confirmButton: "me-2",
        confirmButtonText: "Yes, delete it!",
    }).then((result) => {
        if (result.value) {
            Swal.fire("Deleted!", "Your file has been deleted.", "success");
        }
    });
}
<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
By passing a parameter, you can execute something else for "Cancel". 
showAlert() {
    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!",
            confirmButton: "me-2",
            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"
                );
            }
        });
},

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A message with custom Image Header. 
showAlert() {
    Swal.fire({
        title: "Sweet!",
        text: "Modal with a custom image.",
        imageUrl: require("@/assets/images/logo-dark.png"),
        imageHeight: 20,
        confirmButtonColor: "#556ee6",
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A message with auto close timer. 
showAlert() {
    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
        }
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Custom HTML description and buttons. 
showAlert() {
    Swal.fire({
        title: "HTML example",
        icon: "info",
        html:
            "You can use bold text, " +
            'links ' +
            "and other HTML tags",
        showCancelButton: true,
        confirmButtonClass: "btn btn-success me-2",
        cancelButtonClass: "btn btn-danger",
        buttonsStyling: false,
        confirmButtonText:
            ' Great!',
        cancelButtonText: '',
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A dialog with three buttons. 
showAlert() {
    Swal.fire({
        title: "Do you want to save the changes?",
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: "Save",
        confirmButtonClass: "btn btn-success w-xs me-2",
        cancelButtonClass: "btn btn-danger w-xs",
        denyButtonClass: "btn btn-info w-xs me-2",
        buttonsStyling: false,
        denyButtonText: "Don't save",
        showCloseButton: true,
    }).then(function (result) {
        /* Read more about isConfirmed, isDenied below */
        if (result.isConfirmed) {
            Swal.fire({
                title: "Saved!",
                icon: "success",
                confirmButtonClass: "btn btn-primary w-xs",
                buttonsStyling: false,
            });
        } else if (result.isDenied) {
            Swal.fire({
                title: "Changes are not saved",
                icon: "info",
                confirmButtonClass: "btn btn-primary w-xs",
                buttonsStyling: false,
            });
        }
    });
}
                                                
<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A custom positioned dialog. 
showAlert() {
    Swal.fire({
        position: "top-end",
        icon: "success",
        title: "Your work has been saved",
        showConfirmButton: false,
        timer: 1500,
    });
},


<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
A message with custom width, padding and background. 
showAlert() {
    Swal.fire({
        title: "Custom width, padding, background.",
        width: 600,
        padding: 100,
        confirmButtonColor: "#556ee6",
        background:
            "#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)",
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Ajax request example. 
showAlert() {
    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,
        });
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Custom Sweetalert Example
Title Javascript
Success Message 
showAlert() {
    Swal.mixin({
        customClass: {
            confirmButton: 'btn btn-primary w-xs mb-1',
        },
        buttonsStyling: false
    }).fire({
        title: 'Well done !',
        html: '
Aww yeah, you successfully read this important message.
',
        imageUrl: require("@/assets/images/success-img.png"),
        imageHeight: 150,
        imageAlt: 'Custom image',
        confirmButtonText: 'Back'
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Error Message 
showAlert() {
    Swal.fire({
        html: '
' +
            '' +
            '
' +
            '
Oops...! Something went Wrong !
' +
            '
Your email Address is invalid
' +
            '
' +
            '
',
        showCancelButton: true,
        showConfirmButton: false,
        cancelButtonClass: 'btn btn-primary w-xs mb-1',
        cancelButtonText: 'Dismiss',
        buttonsStyling: false,
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Warning Message 
showAlert() {
    Swal.fire({
        html: '
' +
            '' +
            '
' +
            '
Are you Sure ?
' +
            '
Are you Sure You want to Delete this Account ?
' +
            '
' +
            '
',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-primary w-xs me-2 mb-1',
        confirmButtonText: 'Yes, Delete It!',
        cancelButtonClass: 'btn btn-danger w-xs mb-1',
        buttonsStyling: false,
    });
},

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Join Our Community 
showAlert() {
    Swal.fire({
        title: 'Join Our Community',
        html: '
' +
            '' +
            '' +
            '
',
        imageUrl: require('@/assets/images/logo-sm.png'),
        footer: '
Already have an account ?  Signin  
',
        imageHeight: 40,
        confirmButtonClass: 'btn btn-primary w-xs mb-2',
        confirmButtonText: 'Register ',
        buttonsStyling: false,
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Email Verification 
showAlert() {
    Swal.fire({
        html: '
' +
            '
' +
            '
' +
            '' +
            '
' +
            '
' +
            '
' +
            '
Verify Your Email
' +
            '
We have sent you verification email example@abc.com, 
 Please check it.
' +
            '
' +
            '
',
        showCancelButton: false,
        confirmButtonClass: 'btn btn-primary mb-1',
        confirmButtonText: 'Verify Email',
        buttonsStyling: false,
        footer: '
Didn\'t receive an email ? Resend
',
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
Notification Message 
showAlert() {
    Swal.fire({
        html: '
' +
            '
' +
            '
Welcome Mike Mayer
' +
            '
You have 2 Notifications
' +
            '
' +
            '
',
        imageUrl: require('@/assets/images/users/avatar-2.jpg'),
        showCancelButton: false,
        confirmButtonClass: 'btn btn-primary mb-1',
        confirmButtonText: 'Show Me ',
        buttonsStyling: false,
        imageWidth: 88,
        imageHeight: 88,
        imageAlt: 'Custom image',
    });
}

<b-button type="button" variant="primary" size="sm" @click="showAlert">Click me</b-button>
© Vixon.
Design & Develop by Themesbrand