CODEWITHSUNDEEP
javascriptvue.jsvuejs2sweetalert
Amine Bouhaddi
Amine Bouhaddi

Reputation: 584

ReferenceError: "Swal is not defined"

I'm working on small project using codeigniter and VueJs and sweet alert javascript library. but i get an error in my console ReferenceError: "Swal is not defined" once i call swall.fire({}) inside my VueJs methods. This is my code : 

deleteCustomers(customer_id){
        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) => {
              axios.post('/Thirdparty/deleteCustomers', {id : customer_id}).then(function(response){
                 console.log(response.data);
                 //alert(response.data.error);
                 Swal.fire(
                 'Deleted!',
                 'Your file has been deleted.',
                 'success'
                 );
              });
           });
     }

and of course i have already imported swall using : import Swal from 'sweetalert2';

NB : swall.fire doesn't work only inside Vuejs methods

Upvotes: 12

Views: 93358

Answers (5)

Vladislav Ladicky
Vladislav Ladicky

Reputation: 2487

For (correct) usage of Swal (and almost any other library) inside your methods:

<template>
  ...
</template>

<script>
  import Swal from 'sweetalert2'

  export default {
    data() {
      return {
        swal: Swal
      }
    },

    methods: {
      test() {
        this.swal.fire('Test')
      } 
    },

    created() {
      this.test()
    }
  }
</script>

Upvotes: 0

ms_morgan29
ms_morgan29

Reputation: 1

If you don't want to use CDN, download the sweetalert2.js and sweetalert2.css files for the project:

define the css file in the header:

`<link rel="stylesheet" href="css/sweetalert2.css">`

And the scripts in the body:

`<script src="js/sweetalert2.js"></script>
 <script>

new Swal({

    title: 'Success!',

    text: 'SweetAlert2 installed successfully!',

    icon: 'success',

    confirmButtonText: 'Cool'

    })
</script>`

Upvotes: 0

yaya
yaya

Reputation: 8253

Swal (with Capital S) and Swal.fire() is introduced in sweetalert2 version > 7.20.0.

In older versions (< 7.20.0), you should use swal({options}) instead.

Also make sure to import it with capital S, if you're using npm :

import Swal from 'sweetalert2'

Upvotes: 5

Ahmed Abdallah
Ahmed Abdallah

Reputation: 69

on your main.js register sweet alert to make it accessible in all your components

import swal from 'sweetalert2';
window.Swal = Swal;

Upvotes: 3

Felix Runye
Felix Runye

Reputation: 2541

Here is a quick way to implement Sweet Alert on vue js 

npm install sweetalert2

on your app.js register sweet alert to make it accessible in all your components

import swal from 'sweetalert2';
window.Swal = swal;

Then in any of the components of example ( Example.vue)

<template>
  ...
</template>
<script>
   export default{
     methods:{
       test(){
         Swal.fire('Test!', 'Hello test message','success');
      } 
    }
   }

More Sweet alert methods can be found here

Upvotes: 19

Related Questions