How to use VueSweetalert2 in a Quasar Project

Question

I am trying to pop up a Sweetalert2 modal, but I am struggling to install it correctly I have use npm i vue-sweetalert2 to install it. But I am getting two errors, one that "The "VueSweetalert2" component has been registered but not used." And that this.$swal is not recognized. I think that I have initialized it correctly.

    <template>
  <div>
    <q-btn
      label="Click me"
      @click="clickHandler"
    />
  </div>
</template>
<script>
import VueSweetalert2 from 'vue-sweetalert2';

export default {
  name: 'IndexPage',
  components: {
    VueSweetalert2,
  },
  methods: {
    clickHandler() {
      this.$swal({
        title: 'test',
        text: 'test',
        icon: 'info',
        confirmButtonText: 'Ok',
      });
    },
  },
};
</script>

Answer 1

hello friend this is how it works in quasar it really is very simple all you have to do is: execute this command in you quasar project npm install -S vue-sweetalert2 and then in your quasar page copy and paste like this example that should work

<template>
       <a v-on:click="doSomething">Click</a>
      
</template>
<script>
import Swal from 'sweetalert2'
export default {
  
  methods:{
    doSomething()
    {
      Swal.fire({
            title: 'OPPS',
            text:   "wow",
            icon: 'warning',
          
        });
    }
  }
  
}
</script>

here is the link where I base myself *https://therichpost.com/vue-3-sweetalert2-popup-working-example/ *

Community Verified icon