vue3-toastify is an easy-to-use yet highly-customizable toast notification library for Vue 3 applications.
It allows you to fully control the look and feel of your toast messages, giving you the ability to create unique toast-like notifications that perfectly match the style of your web app.
How to use it:
1. Import the vue3-toastify.
import { toast } from 'vue3-toastify'; import 'vue3-toastify/dist/index.css';
2. Display a basic toast message on the app.
export default { name: "App", setup() { const notify = () => { toast("A basic toast message", { // toast options here }); } return { notify }; } };
3. Available toast options.
/** * support multiple * @default true */ multiple?: boolean; /** * use like * ``` * toast.info("Hello World.\n I am <b>Tom</b>", { dangerouslyHTMLString: true }); * ``` */ dangerouslyHTMLString?: boolean; /** * Support right to left content * @default false */ rtl?: boolean; /** Used to identify the ToastContainer when working with multiple container. Also used to set the id attribute */ containerId?: Id; /** * One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left * @mark {@link ToastPosition} * @default 'top-right' */ position?: ToastPosition; /** * Delay in ms to close the toast. If set to false, the notification needs to be closed manually * @default 5000 */ autoClose?: number | boolean; /** * Pass a custom close button. * To remove the close button pass `false` */ closeButton?: CloseBtnType; /** * A reference to a valid react-transition-group/Transition component * @default 'bounce' */ transition?: ToastTransition | CSSTransitionProps; /** * Display or not the progress bar below the toast(remaining time) * @default false */ hideProgressBar?: boolean; /** * Keep the timer running or not on hover * @default true */ pauseOnHover?: boolean; /** * Pause the timer when the window loses focus * @default true */ pauseOnFocusLoss?: boolean; /** * Dismiss toast on click * @default true */ closeOnClick?: boolean; /** * Add optional classes to the toast wrapper * @default - */ toastClassName?: string; // TODO: ToastClassName /** * Add optional classes to the TransitionGroup container * @default '' */ bodyClassName?: string; // TODO: ToastClassName /** * Add optional inline style to the container * @default {} */ style?: CSSProperties; /** * Add optional classes to the progress bar * @default - */ progressClassName?: string; // TODO: ToastClassName /** * Add optional inline style to the progress bar * @default {} */ progressStyle?: CSSProperties; /** * Define the ARIA role for the toasts * @default 'alert' */ role?: string; /** * One of auto, light, dark, colored * @description `auto` means automatically detects system theme colors * @mark {@link ToastTheme} * @default 'auto' */ theme?: ToastTheme;
Preview:
Changelog:
v0.1.14 (10/16/2023)
- Update
v0.1.13 (09/20/2023)
- Support autoClose/closeOnClick when promise fininshed
v0.1.12 (08/09/2023)
- Bugfixes
v0.1.11 (05/26/2023)
- Bugfixes
v0.1.10 (05/20/2023)
- Auto clear on router change
v0.1.9 (05/15/2023)
- Omit loading props
v0.1.8 (05/03/2023)
- Bugfixes
v0.1.7 (04/17/2023)
- Bugfixes
v0.1.6 (03/20/2023)
- Bugfixes
v0.1.5 (03/13/2023)
- Bugfixes
v0.1.4 (03/11/2023)
- Remove prefers-color-scheme
v0.1.3 (03/09/2023)
- Auto detect theme
v0.1.2 (03/08/2023)
- Bugfixes
v0.1.1 (02/25/2023)
- Bugfixes
v0.1.0 (02/16/2023)
- Add limit number of toasts
v0.0.9 (02/15/2023)
- Dismiss with animation
v0.0.8 (02/14/2023)
- Update animation
v0.0.7 (02/13/2023)
- Added multiple prop
v0.0.6 (02/05/2023)
- Bug Fixes
Download Details:
Author: jerrywu001
Live Demo: https://vue3-toastify.netlify.app/
Download Link: https://github.com/jerrywu001/vue3-toastify/archive/refs/heads/main.zip
Official Website: https://github.com/jerrywu001/vue3-toastify
Install & Download:
# Yarn
$ yarn add vue3-toastify
# NPM
$ npm i vue3-toastify