const { showToast } = useToast();
 
 showToast({ type: ToastEnum.success, message: "ایمیل حاوی لینک بازنشانی برای شما ارسال شد." });
 //بدون typescript
 showToast({ type: 'success', message: "ایمیل حاوی لینک بازنشانی برای شما ارسال شد." });

//روش اول 
export const useToast = () => {
    const toastRef = useState('--toast--', () => ({ show: false, message: '', type: "info" }));
    return { toastRef };
}

//روش دوم
const toastRef = ref({ show: false, message: "" , type: "info" });
export const useToast = () => {
    return { toastRef };
}

export const useToast = () => {
  const toastRef = useState('--toast--', () => ({ show: false, message: "", type: "info" }));
  const close =() => {
      toastRef.value = { ...toastRef.value, show: false }
  }
  const showToast = ({ message, type }) => {
      toastRef.value = { message, type, show: true };
      setTimeout(()=>{
        close();
      },3000)
  }
  return { showToast, toastRef };
}

import { useDebounceFn } from '@vueuse/core'
export const useToast = () => {
  const toastRef = useState('--toast--', () => ({ show: false, message: "", type: "info" }));
  const debounceClose = useDebounceFn(() => {
    toastRef.value = { ...toastRef.value, show: false }
  }, 3000)
  const showToast = ({ message, type }) => {
      toastRef.value = { message, type, show: true };
      debounceClose()
  }
  return { showToast, toastRef };
}

export enum ToastEnum {
  info = 'info',
  success = 'success',
  warning = 'warning',
  error = 'error'
}
interface Toast {
    message: string;
    type: ToastEnum;
    show: boolean;
}
export const useToast = () => {
    const toastRef = useState<Toast>('--toast--', () => ({ show: false, message: '', type: ToastEnum.info }));
    const debounceClose = useDebounceFn(() => {
        toastRef.value = { ...toastRef.value, show: false }
    }, 3000)
    const showToast = ({ message, type = ToastEnum.info }: { message: string, type: ToastEnum }) => {
        toastRef.value = { message, type, show: true };
        debounceClose();
    }
    return { showToast, toastRef };
}

<template>
  <div
    ref="target"
    class="invisible fixed bottom-0 right-1/2 transform translate-x-1/2 p-3 rounded-md"
    :class="`bg-${toastRef.type} text-white`"
  >
    {{ toastRef.message }}
  </div>
</template>
<script setup lang="ts">
  // safe list in tailwind.config or just comment them here bg-info bg-success bg-warning bg-error
  import gsap from "gsap";
  const { toastRef } = useToast();
  const target = ref<HTMLElement | null>(null);
  let animation: any;
  const setAnimation = (): void => {
    animation = gsap.to(unref(target), {
      autoAlpha: 1,
      bottom: 80,
      ease: "power4",
      paused: true,
      duration: 0.5,
    });
  };
  onMounted(() => {
    setAnimation();
    if (unref(toastRef).show) {
      animation.play();
    }
  });
  watch(toastRef, (value) => {
    if (value.show) {
      animation.play();
    } else {
      animation.reverse();
    }
  });
</script>

<template>
  <div>
      <nuxt-layout>
        <nuxt-page></nuxt-page>
      </nuxt-layout>
    <app-toast></app-toast>
  </div>
</template>

<template>
  <div>
      <nuxt-layout>
        <nuxt-page></nuxt-page>
      </nuxt-layout>
    <lazy-app-toast v-if="toastRef.show"></lazy-app-toast>
  </div>
</template>

<script lang="ts" setup>
const { toastRef } = useToast();
</script>