Use in Composition API supported?

[andgeno]

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?

[andgeno]

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()!');
    }

[jprodrigues70]

Thank you!

[atonamy]

It must be added in documentation here https://vuejsexamples.com/vue-js-toast-notification-plugin-for-vue-3/

[ezef]

Thanks @andgeno !!