Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use in Composition API supported? #16

Open
andgeno opened this issue Jan 10, 2021 · 4 comments
Open

Use in Composition API supported? #16

andgeno opened this issue Jan 10, 2021 · 4 comments

Comments

@andgeno
Copy link

andgeno commented Jan 10, 2021

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
Copy link
Author

andgeno commented Jan 10, 2021

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

@andgeno andgeno closed this as completed Jan 10, 2021
@jprodrigues70
Copy link
Member

Thank you!

@atonamy
Copy link

atonamy commented Aug 9, 2021

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

@ezef
Copy link

ezef commented Mar 29, 2022

Thanks @andgeno !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants