How to import Sweetalert2 into Laravel with NPM?

What is SweetAlert?

Sweet Alert is a way to customize alerts in your games and websites. It allows you to change from a standard JavaScript button. We can add buttons, change the color text, and even add additional alerts that change depending on the user.

How do you use SweetAlert in laravel blade?

Steps to Use Sweet Alert in Laravel

• Install Laravel.
• Install Laravel UI Package.
• Setup Database.
• Install Sweet Alert Package.
• Set up Blade View.
• Edit RegisterController.
• Other Sweetalert Uses.

First, open your Laravel project in the terminal and add

npm install sweetalert2

This will install the package into package.json which looks like this:

"dependencies": {
    "sweetalert2": "^10.15.5"
}

Next, we need to import SweetAlert2 into resources/js/app.js 
Import to make the package available to the current file

import swal from 'sweetalert2';

If you want to use SweetAlert2 globally you can add it to a window object:

window.Swal = swal;

This can then be used directly in app.js or in any blade file.
Now we need to compile the changes into app.js by running:

npm run dev

Using SweetAlert2 in a Blade file

To use a blade file lets you need to ensure the content is loaded before attempting to use SweetAlert2 otherwise you will get an error. To do this we can add an event listener called DOMContentLoaded which will run only when the content is ready.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   //content goes here
});
</script>

Here’s an example of a confirmation alert:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Deleted!',
          'Your file has been deleted.',
          'success'
        )
      }
    })
});
</script>

How do you put a picture on sweet alert?

swal({ title: ‘<strong>HTML <u>example</u></strong>’, type: ‘info’, Html: ‘You can use <b>bold text</b>, ‘ + ‘<a href=”//github.com”>links</a> ‘ + ‘and other HTML tags’, }); you can put anything in the Html tag of course

How do I change the background color in Sweetalert?

To achieve this you can just use jQuery selectors and select the overlay element like so. You will have to select the. swal2-container.in to change the overlay and apply the CSS using jquery.

Why is Swal not working?

Atomic Wave ~⚛ Your code logs an error message of “swal” is not defined because you have put the script tag in the body, so it is not loaded before the code in the JS tab runs. Then, because your swal() is in the DOMContentLoad event listener, instead of the window load event listener, swal() runs before the library is imported.

What is Swal fire?

Inside of the callback function to addEventListener, you can open your sweetalert question popup using Swal.fire() . This method returns a promise, which resolves to the text entered by the user.

I hope it helps you.!