Easy & Powerful Toast Notification Component – vue3-toastify

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.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