Composition API support?

[restyler]

Hello, Is it possible to use the component in Composition API? As far as I see, the example is based on Options API.

Thanks!

[jprodrigues70]

Hi, @restyler

the component was not written with the new Composition API. So for now it’s not supported, but I want it to be supported.

It's a great candidate for PRs 😄

UPDATE: You can use it in Composition API as @andgeno related in this comment https://github.com/MeForma/vue-toaster/issues/16#issuecomment-757466526

[restyler]

Thank you! In case anyone is interested in quick solution, I've found https://github.com/Maronato/vue-toastification/tree/next which is a similar project but designed with Vue 3 Composition API support in mind.

[andgeno]

Maybe this is of interest for you. I wrote a quick index.d.ts file to make vue-toaster have a typed class Toaster and a corresponding interface ToasterOptions. This also enables code auto-completion. 😀

declare module '@meforma/vue-toaster' {
    export const install: PluginFunction<{}>;

    export interface ToasterOptions {
        message?: string;
        type?: 'default' | 'success' | 'info' | 'warning' | 'error';
        position?: 'top' | 'bottom' | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
        duration?: number;
        dismissible?: boolean;
        onClick?(): void;
        onClose?(): void;
        queue?: boolean;
        pauseOnHover?: boolean;
        useDefaultCss?: boolean;
    }
    export = class Toaster {
        clear(): void;

        show(message: string, options?: ToasterOptions): void;
        success(message: string, options?: ToasterOptions): void;
        error(message: string, options?: ToasterOptions): void;
        info(message: string, options?: ToasterOptions): void;
        warning(message: string, options?: ToasterOptions): void;
    };
}

[naftis]

Should this library expose useToast() that you could use directly in the components? For example vue-router exposes useRouter, which is simple as this:

function useRouter() {
  return vue.inject(routerKey);
}

Right now I have:

import { Toaster } from '@meforma/vue-toaster';
import { inject } from 'vue';

export function useToast(): Toaster {
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  return inject<Toaster>('toast')!;
}

based on @andgeno's example

@jprodrigues70 what do you think?

[jprodrigues70]

@andgeno @naftis Very nice! Would you open a PR with these improvements?

[eXodes]

Not sure if this will help, but I set it this way to use the toast on any composition API components.

// useToast.js
import { getCurrentInstance } from "@vue/runtime-core";

export default () => {
    const toast = getCurrentInstance().ctx.$toast;

    const trigger = (message, type) => {
        switch (type) {
            case "success":
                toast.sucess(message);
                break;
            case "error":
                toast.error(message);
                break;
            case "warning":
                toast.warning(message);
                break;
            case "info":
                toast.info(message);
                break;
            default:
                toast.show(message);
                break;
        }
    };

    return {
        trigger,
    };
};

// app.js
import { createApp } from "vue";
import Toaster from "@meforma/vue-toaster";
import App from "./App.vue";

createApp(App)
    .use(Toaster, {
        duration: 5000, // or additional global properties
    })
    .mount("#app");

// Component.vue
...
import useToast from "path/to/useToast";
...
setup() {
    const { trigger } = useToast();

    ...
    trigger('Show me toast!');  // or pass the toast type as the second args
}
...

Edit: Change to set the toast type on trigger.

[alvarosabu]

I'm really interested in having this. @naftis solutions seem the proper one, is there a PR already opened?

[naftis]

@alvarosaburido My project moved to https://github.com/Maronato/vue-toastification/tree/next which implements the hook and also had other features this one was missing. It would be nice to have this + solid TypeScript support in this project too!

[ankurk91]

You can try https://github.com/ankurk91/vue-toast-notification for composition api