I successfully integrated vue-sweetalert2 into my Vue app (version 2.6). The setup in my main.js file looks like this:
import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);
In one of my components, I have a basic button with a click event handler:
<button v-on:click="alertDisplay">Click me</button>
alertDisplay() {
this.$swal('Heading', 'This is a heading', 'OK');
},
Everything seems to be functioning correctly except for the fact that when the button is clicked, the sweetAlert modal appears at the very bottom left of the page without any styling applied. I've done some research but haven't found a definitive explanation or fix for this issue within the context of a Vue app.
If you have any insights or suggestions, they would be greatly appreciated!