When working with Vue 2.x in our production applications, we utilize a toast component. This toast component is mounted once through a plugin (code provided below) and then added to the Vue prototype for easy access in every component instance.
This setup simplifies things as we no longer need to add the toast component everywhere it's used.
Vue 2.x plugin
export default {
install(vue: any, _: any) {
const root = new Vue({ render: (createElement) => createElement(Toast) });
root.$mount(document.body.appendChild(document.createElement("div")));
const toastInstance: Toast = root.$children[0] as Toast;
vue.prototype.$toast = {
show: (state: ToastState, text: string) => { toastInstance.show(state, text); },
hide: () => { toastInstance.hide(); }
};
}
This functionality can be called in any component like:
this.$toast.show(ToastStates.SUCCESS, "Some success message");
In a recent project using Vue 3, I wanted to implement something similar. However, due to the lack of access to this in the setup function, the previous approach wasn't feasible.
I explored various options but couldn't find a definitive best practice.
Provide / Inject: Using this method shows promise, where I can do
export const appInstance = createApp(App);
and then
appInstance.provide("toast", toastComponentInstance)
to later inject it into any components. The challenge here is that to make it available in every component, it needs to be attached to the initial app instance before it's created. One workaround could be manually mounting it and passing it in, but that might feel hacky.
Composition: I also came across a related issue discussed here: How to access root context from a composition function in Vue Composition API / Vue 3.0 + TypeScript? which didn't provide much help and required some workarounds to gain access to the plugin. The following code snippet illustrates this:
export function useToast() {
const root = getCurrentInstance();
const openToast: (options: ToastOptions) => void = (options: ToastOptions) => {
root.ctz.$toast.open(options);
}
const closeToast: () => void = () => {
root.ctx.$toast.close();
}
return {
openToast,
closeToast
}
}
I have other ideas in mind but they seem somewhat far-fetched and hacky. I would appreciate hearing others' thoughts on alternative solutions. My goal is to find a simple way to have one instance of a toast that can be easily opened or closed whenever needed.