Vue3 Toaster

Lightweight toast-notification plugin for Vue 3

Installation

npm install @incuca/vue3-toaster

Usage

Import in your main.js

import Toaster from "@incuca/vue3-toaster";

createApp(App)
  .use(Toaster)
  .mount("#app");

Usage in your components with Options API

this.$toast.show(message, { ...options });
this.$toast.success(`Hey! I'm here`);
this.$toast.error(`Hey! I'm here`);
this.$toast.warning(`Hey! I'm here`);
this.$toast.info(`Hey! I'm here`);
// Close all opened toasts after 3000ms
setTimeout(this.$toast.clear, 3000);

Usage with Composition API

import { inject } from "vue";
const toast = inject("toast");
toast.show(message, { ...options });

Available options

The API methods accepts these options:

Attribute	Type	Default	Description
message	String	--	Message text/html (required)
type	String	default	success, info, warning, error or default
position	String	bottom-right	top, bottom, top-right, bottom-right,top-left or bottom-left
duration	Number/Boolean	4000	Visibility duration in milliseconds or false that disables duration
dismissible	Boolean	true	Allow user close by clicking
onClick	Function	--	Do something when user clicks
onClose	Function	--	Do something after toast gets dismissed
queue	Boolean	false	Wait for existing to close before showing new
maxToasts	Number/Boolean	false	Defines the max of toasts showed in simultaneous
pauseOnHover	Boolean	true	Pause the timer when mouse hover a toast
useDefaultCss	Boolean	true	Use default css styles

License

This project is licensed under the MIT License - see the LICENSE file for details.