I want to create a reusable wrapper function written in TypeScript for triggering a toast notification by using a composition function, as defined in the current specification for Vue 3.0: Composition API RFC.
This example is using BootstrapVue v2.0 toast component. With Vue 2, it would be invoked via the this.$bvToast
Vue component instance injection in the root context:
this.$bvToast.toast('Error happened', {
title: 'Oh no',
variant: 'danger'
});
This service-like composition function would look much like this:
// File: @/util/notify.ts
export function useNotify() {
const notifyError = (title: string, msg: string) => {
// How to access context.root as in a function component, without passing it to this function?
context.root.$bvToast.toast(msg, {
title,
variant: 'danger'
});
};
return { notifyError};
}
export default useNotify;
And would be used much like this:
// Use in your functional component:
import { createComponent } from '@vue/composition-api';
import { useNotify} from '@/util/notify';
export default createComponent({
name: 'MyFailingComponent',
setup() {
const { notifyError } = useNotify();
notifyError('Request error', 'There was an error processing your request, please try again later.');
return {};
}
});