Currently, I have integrated a vue3 package known as vue3.toastify for managing my toast notifications.
The guidelines provided in the documentation clearly mention that to modify default transitions globally, the following code snippet must be implemented:
app.use(
Vue3Toasity,
{
transition: toast.TRANSITIONS.FLIP,
// Available options: toast.TRANSITIONS.BOUNCE, toast.TRANSITIONS.ZOOM, toast.TRANSITIONS.SLIDE
}, // as ToastContainerOptions
);
Unfortunately, upon implementing this code, the application throws an error message:
app.js:1212 Uncaught ReferenceError: toast is not defined
at eval (main.js:29:1)
at ./src/main.js (app.js:294:1)
at __webpack_require__ (app.js:1209:33)
at app.js:2389:109
at __webpack_require__.O (app.js:1255:23)
at app.js:2390:53
at app.js:2392:12
I am placing this code within my main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import ClickOutside from "./directives/clickOutside.js";
import hapticDirective from "./directives/hapticDirective.js";
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
console.log(Vue3Toastify);
createApp(App)
.directive("haptic", hapticDirective)
.directive("click-outside", ClickOutside)
.use(store)
.use(router)
.use(
Vue3Toasity,
{
closeButton: false,
containerClassName: 'toast-container-class',
toastClassName: 'toast-class',
bodyClassName: 'toast-body-class',
progressClassName: 'progress-bar',
autoClose: 30000,
transition: toast.TRANSITIONS.BOUNCE, // Unfortunately, this does not work :(
style: {
opacity: '1',
userSelect: 'initial',
},
})
.mount('#app')
In contrast, when I implement it locally within my child component Login.vue, everything works smoothly:
const registerWithGoogle = async () => {
error.value = null;
success.value = null;
const auth = getAuth();
const provider = new GoogleAuthProvider();
try {
const userCredential = await signInWithPopup(auth, provider);
console.log(userCredential.user);
await store.dispatch("logInStateCommit", {
user: userCredential.user,
});
success.value = "You're in!";
router.push("/dashboard");
} catch (err) {
handleAuthError(err);
}
};
const handleAuthError = (err) => {
console.error(err.message);
switch (err.code) {
case "auth/invalid-email":
error.value =
"The email address provided is not in a valid format. Please enter a valid email address.";
break;
case "auth/missing-password":
error.value = "Please type your password";
break;
case "auth/unauthorized-domain":
error.value =
"You can't login using an authentication provider form this specific domain";
break;
default:
error.value =
"An unknown error has occurred. Please try again later or contact support for assistance";
break;
}
toast.error(error.value, {
transition: toast.TRANSITIONS.BOUNCE, // Works perfectly here
});
};
If anyone could provide guidance on resolving this issue, it would be greatly appreciated. Thank you in advance.