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

Is it feasible for a form button to perform multiple actions simultaneously?

Every time I try to utilize "useCallback," it results in a TypeError error popping up

Passport JS allows you to create a secure login form that redirects users to different URIs based on their role

Ways to monitor the status of a server request using jQuery (ajax)?

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Utilizing v-model alongside various JavaScript plugins within a single select element

I will not be accessing the function inside the .on("click") event handler

Learn the process of incorporating hyperlinks into individual table entries with the PrimeVue DataTable component

What is the proper way to address the issue of nesting ternary expressions when it comes to conditionally rendering components?

Issue encountered when trying to attach a hover event to the items in a comb

Is it possible to change the src attribute after the page has loaded and execute it

Storing data from an API response into the localStorage using Vue.js upon clicking

The Next.js application is functioning smoothly in development, but encounters errors during the building and deployment processes

Steps for setting up i18nextStart by including the i

Leveraging the useRoute() function with Vue 3 Composition API and Typescript: [Vue alert]: The injection "Symbol(route location)" was not detected when employing Typescript

Issue with Yup and Formik not validating checkboxes as expected

Experiencing a lack of content in an Express response

Choose a random cell in Jquery every second

In order to resolve this issue, I must eliminate any duplicate objects and then calculate the total sum using JavaScript

Retrieve the value of a field from a Formik form integrated with Material UI