how to add sweet alert 2 in laravel vue project [easiest way]

How to add sweet alert in laravel Vue Project


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 We can install it in our project using this npm command
npm install sweetalert2 --save
It should look like this How to add sweet alert in laravel Vue Project After adding using "npm" command ,You should see "Sweet alert" in "package.json file".Like this How to add sweet alert 2 in laravel Vue Project


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;
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;
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.
                      type: 'success',
                      title: 'User Added successfully'
Change title to your needs.Thats it you have sweet alert installed in your Laravel-Vue Project. Check example Here