Introduction

Hey there ,Today we are going to add Sweet Alert in Laravel Vue application. First of all it is pretty easy to do.Just follow Below given steps and all should be working flawlessly. Sweet alert 2 Page [ads] We can install it in our project using this npm command

npm install sweetalert2 --save

[ads] It should look like this [ads] After adding using "npm" command ,You should see "Sweet alert" in "package.json file".Like this [ads]

Installation

Now we need to look for "resources/app.js" And in this file add below given code

      //Including sweet alert
      import swal from 'sweetalert2'
      window.swal = swal;

[ads] This way we are including "Sweet alert Globally" That means we can access it anywhere in our application. Lets add a "Toast" in sweet alert.for that we need to add below given code in our "resources/app.js" also.

const toast = swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
});
window.toast = toast;

[ads] Here in above code we are setting position to the right-top corner of screen. And timer is set to 3 Seconds so after 3 seconds toast will disappear. Now add below given code where ever you want your toast(sweet alert) to work.

                    toast.fire({
                      type: 'success',
                      title: 'User Added successfully'
                    })

[ads] Change title to your needs.Thats it you have sweet alert installed in your Laravel-Vue Project. Check example Here [ads] https://easybay.org/2019/04/09/how-to-setup-laravel-on-macos-xampp-2019/ [ads]