Looks like an error has occurred: "Swal has not been defined"

Question

Looks like an error has occurred: "Swal has not been defined"

I'm currently working on a small project that involves using CodeIgniter, VueJs, and the Sweet Alert Javascript library. However, I encountered an error in my console stating

ReferenceError: "Swal is not defined"

when I try to call swall.fire({}) within my VueJs methods. Here is a snippet of 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'
                 );
              });
           });
     }

It's worth noting that I have already imported Swall using: import Swal from 'sweetalert2';

NB: swall.fire only seems to fail inside Vuejs methods.

javascript vue.js vuejs2 sweetalert

Answer 1

Answer №1

If you're looking to add Sweet Alert to your Vue.js project, here is a simple way to do it:

npm install sweetalert2

In your app.js file, register Sweet Alert so that it can be used in all components:

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

After this setup, you can easily use Sweet Alert in any component, like in the following Example.vue:

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

For more Sweet Alert methods and details, visit this link.

Answer 2

If you're looking to add Sweet Alert to your Vue.js project, here is a simple way to do it:

npm install sweetalert2

In your app.js file, register Sweet Alert so that it can be used in all components:

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

After this setup, you can easily use Sweet Alert in any component, like in the following Example.vue:

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

For more Sweet Alert methods and details, visit this link.

Answer 3

Answer №2

Swal (with a capital "S") and Swal.fire() were introduced in sweetalert2 version > 7.20.0.

In versions prior to 7.20.0, you should use swal({options}) instead.

Additionally, remember to import it with a capital "S" if you are using npm:

import Swal from 'sweetalert2'

Answer 4

Swal (with a capital "S") and Swal.fire() were introduced in sweetalert2 version > 7.20.0.

In versions prior to 7.20.0, you should use swal({options}) instead.

Additionally, remember to import it with a capital "S" if you are using npm:

import Swal from 'sweetalert2'

Answer 5

Answer №3

Ensure Sweet Alert is globally accessible in all components by registering it in your main.js file.

import sweetAlert from 'sweetalert2';
window.sweetAlert = sweetAlert;

Answer 6

Ensure Sweet Alert is globally accessible in all components by registering it in your main.js file.

import sweetAlert from 'sweetalert2';
window.sweetAlert = sweetAlert;

Looks like an error has occurred: "Swal has not been defined"

Answer №1

Answer №2

Answer №3

Similar questions

"Trouble with Heroku: JavaScript script failing to load with 404

Is there a way to disable a row using ag-grid components?

Issues with button hover causing background transition difficulties

Is it possible to validate an email domain using node.js? For example, checking if gmail.com is a valid email domain, and ensuring that users do not enter incorrect variations such as egmail.com

Having trouble setting a cookie. Sharing the complete code on codeSandBox for both backend and frontend. Can anyone spot the issue? Appreciate the help! Using Express with Vue 3

The character 'T' cannot be assigned to the data type 'number'

The present URL of Next.js version 13

Encounter a snag when attempting to upgrade to React version 16.10.2 while working with Ant Design Components - the error message reads: "

TypeError: The function cannot be performed on the value of 0 in the Array.from

Exploring the Functionality of Using Multiple Middlewares in Vue.js 3

What is the method to obtain the dimensions of the browser window using JavaScript?

Using JavaScript/jQuery to tally characters

Troubleshooting a Codeigniter issue with CSRF and jQuery ajax

Create a CSS menu that centers the links

The networking feature stops functioning on Android devices after upgrading from Ionic 1.5.0 to 1.6.3

Ways to activate an event based on the dimensions (width/height) of

What is the significance of "new" being omitted in the upcoming jQuery script?

Eslint in Gulp can't locate my .eslintrc configuration file

Tips for creating a responsive image using Material-UI

Having trouble with the response function not functioning properly within an AJAX autocomplete