vue-toaster
vue-toaster copied to clipboard
Use in Composition API supported?
Hi, I tried to use your plugin with Vue 3 and TypeScript but could not make it work.
I added a .d.ts
file to make TypeScript ignore missing types and just be happy.
In my mina.ts
I added
import Toaster from '@meforma/vue-toaster';
// ...
app.use(Toaster);
In my App.ts
I am using the Composition API with setup()
like this:
export default defineComponent({
setup(props, context): any {
// ...
// this.$toast('Hi there');
// ...
}
}
Unfortunately, this.$toast
is not available because of the Composition API.
I checked the docs and searched a lot on the internet but to no avail.
Any idea how to make it work?
Well, I just found out how to use it. You have to provide
and inject
!
This is my main.ts
:
app.use(Toaster).provide('toast', app.config.globalProperties.$toast);
This is my App.ts
:
mounted() {
this.$toast.show('Toast from mounted()!');
},
setup(props, context): any {
const toast: any = inject('toast');
toast.show('Toast from setup()!');
}
Thank you!
It must be added in documentation here https://vuejsexamples.com/vue-js-toast-notification-plugin-for-vue-3/
Thanks @andgeno !!