How To Install Sweetalert2 In Laravel 9

In this article, we will see how to install sweetalert2 in laravel 9. Here, we will learn how to use sweetalert2 in laravel 8 and laravel 9 and display a modern and beautiful alert box. sweetalert2 is used to create different types of the custom alert box like success messages, error messages, warning modals, confirm modals, custom notifications, etc.

So, let's see how to use sweetalert2 in laravel 9, sweetalert2 cdn, laravel 9 sweetalert2, sweet alert 2 laravel 8, and sweetaler2 modal popup.

Sweetalert2 is a beautiful, responsive, customizable javascript popup with zero dependencies.

Learn More on GitHub: SweetAlert2

Download and Install Sweetalert2 In Laravel 9

There are two ways to you can use sweetalert2 in laravel 9 and laravel 8.

1. Using NPM

You can install sweetalert2 using the npm command.

npm install sweetalert2

2. Using CDN File

<script src="//"></script>


<link href=''>
<script src=""></script>


Use of Sweetalert2 In Laravel 9

After successful setup, we will use sweetalert2 using swal() function.

Example 1: Text message with success icon
  'You clicked the button!',




Example 2: Title with text

Display the title with under the text.
  'The Demo?',
  'This is Demo ?',


Example 3:  Modal with title, icon, text, and footer

Display Icon, title, and text.{
  icon: 'error',
  title: 'Not Found...',
  text: 'Something went wrong!',
  footer: '<a href>Are you facing any issue?</a>'


Example 4: Confirm dialog box with a confirm button

Display confirm modal with confirm button and cancel button and also display the success message after confirmation.{
  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) {
      'Your file has been deleted.',



Integration with Other JS Framework

You can integrate sweetaler2 in three major JS frameworks.

  1. React
  2. Vue
  3. Angular


Sweetalert2 Input Types

You can use HTML input types like text, email, password, URL, checkbox, radio button, file, and much more.

Example: email input type

const { value: email } = await{
  title: 'Input email address',
  input: 'email',
  inputLabel: 'Your email address',
  inputPlaceholder: 'Enter your email address'

if (email) {`Entered email: ${email}`)




You may also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.