calling SweetAlert2 inside Async method in VUE 3 - vue.js

Question

I tried to pops out sweetalert if failed to retreive data from server
I've imported sweet alert in main.js :
import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'
const app = createApp(App)
app.use(VueSweetalert2)
app.mount('#app')
And inside the Table.vue components i tried to call swal but got an error says (undefined $this.swal) instead :
<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'
export default {
setup() {
let transactions = ref([])
onMounted(() => {
getTransactions()
})
async function getTransactions() {
try {
let { data } = await axios.get('http://127.0.0.1:8000/api/transactions')
transactions.value = data.data
} catch(e) {
this.$swal('Something went wrong.')
}
}
return {
transactions
}
}
}
</script>
Any suggestion how to solve this ?

Answer 1

You can't use this as the component instance inside setup() because the component has not been created yet. There are other ways to get that $swal property.
vue-sweetalert2 exposes SweetAlert via app.config.globalProperties.$swal or as a provide-ed $swal prop.
A simple way to use it in the Composition API is through inject():
import { inject } from 'vue'
export default {
setup() {
const swal = inject('$swal')
async function getTransactions() {
//...
swal('Something went wrong.')
}
}
}
demo 1
However, the vue-sweetalert2 docs recommend using sweetalert2 directly in this case:
When using "Vue3: Composition API" it is better not to use this wrapper. It is more practical to call sweetalert2 directly.
You can use sweetalert2 directly like this:
import { onMounted, inject } from 'vue'
import Swal from 'sweetalert2'
export default {
name: 'App',
setup() {
async function getTransactions() {
//...
Swal.fire('Something went wrong.')
}
onMounted(() => getTransactions())
}
}
demo 2

Answer 2

In main.js file
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
const app = createApp(App);
app.use(VueSweetalert2);
window.Swal = app.config.globalProperties.$swal;
app.mount("#app");
Use Swal.fire() inside COMPOSITION API
export default {
setup() {
function yourFunctionName() {
Swal.fire('Hello !')
}
}
}