How to use Sweetalert in main.js Vue 3 - vue.js

Question

I was learning Vue 3 and get some trouble to use SweetAlert2 in app.js.
everything is ok and worked when i use SweetAlert2 in component Vue but not work in app.js
my goal:
i want to show alert with confirm button when get error response Unauthenticated. from axios interceptors and redirect user to login page
app.js
import {createApp} from 'vue'
require('./bootstrap')
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './store'
// SweetAlert2
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
axios.interceptors.response.use(function (response) {
return response
}, function (error) {
console.log(error.response.data.message)
if (error.response.data.message === 'Unauthenticated.') {
swal({
title: "Session Expired",
text: "Your session has expired. Would you like to be redirected to the login page?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
closeOnConfirm: false
}).then((result) => {
if (result.value) {
window.location.href = "/login"
}
});
}
return Promise.reject(error)
})
const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.use(router)
app.use(VueSweetalert2)
app.use(store)
app.mount('#app')
it work when i change error response with this, (but not elegant like this for me)
...
axios.interceptors.response.use(function (response) {
return response
}, function (error) {
console.log(error.response.data.message)
if (error.response.data.message === 'Unauthenticated.') {
alert('Session Expired');
window.location.href = "/login"
}
return Promise.reject(error)
})
...
i think it would be good if using sweetalert,
thank youu...

Answer 1

Explanation
I faced the same problem when using Vue 3, and I wanted to use sweetalert2 in my router/index.js to add an alert when a user goes to an unauthorized route.
The same problem will appear if you want to use a sweetalert2 in store/index.js after calling an action fetching data from the backend.
To work around this problem, you must use the native package of sweetalert2, then you can use swal in any .js file.
By the way, I don't want to install any external package, so I found that when you are installing the vue-sweetalert2, the native package will be installed also (because it is a dependency of vue-sweetalert2).
Workaround
All you have to do is:
Keep what you had done in main.js (to use sweetalert2 inside components).
In any .js file where you want to use swal, add this import Swal from 'sweetalert2/dist/sweetalert2', and now you can access and use Swal.fire({}).
Example
I will attach an example of what I want to do (in my case), and how I work around the problem:
My main.js file:
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
const app = createApp(App);
app.use(store);
app.use(router);
app.use(VueSweetalert2);
app.mount('#app');
My router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Swal from 'sweetalert2/dist/sweetalert2';
import store from '../store/index';
const router = createRouter({
routes: [
// ...
],
});
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta['requiresAuth']) && store.state.auth.isAuthenticated === false) {
Swal.fire({
toast: true,
position: 'bottom-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
icon: 'error',
title: 'Permission denied',
text: 'You are not authenticated to access this page.'
});
next({
name: 'login',
params: { nextUrl: to.fullPath }
});
}
next();
});
export default router;

Answer 2

i think you need to try withoud condition first,
try only sweet alert without :
axios.interceptors.response.use(function (response) {
return response
}, function (error) {
console.log(error.response.data.message)
if (error.response.data.message === 'Unauthenticated.') {
swal({
title: "Session Expired",
text: "Your session has expired. Would you like to be redirected to the login page?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
closeOnConfirm: false
}).then((result) => {
if (result.value) {
window.location.href = "/login"
}
});
}
return Promise.reject(error)
})
u can try
https://www.npmjs.com/package/vue-sweetalert2