Lightweight Toast Notification Plugin For Vue 3 – dk-toast

dk-toast is a lightweight yet fully customizable toast notification plugin for Vue 3 apps.

See Also:

How to use it:

1. Import the dk-toast.

import { createApp } from 'vue';
import App from './App.vue';
import DKToast from 'vue-dk-toast';

2. Display a basic toast notification on the app.

this.$toast('Hello World!');

3. Config the toast notification with the following options.

this.$toast('Hello World!', {
  duration: 5000,
  styles: {
    // CSS styles here
  link: { // turns the toast into an <a> element which has a href of the one provided and optional target="_blank".
    href: '',
    targetBlank: true
  // Any valid HTML, intended for icons
  slotLeft: '', 
  slotRight: '', 
  class: '',
  type: 'success', // 'success', 'error' and 'passive'
  positionX: 'center',
  positionY: 'top',
  disableClick: true


Lightweight Toast Notification Plugin For Vue 3 - dk-toast


v3.2.1 (04/13/2022)

  • Add pause-on-hover feature.

v3.1.0 (03/04/2022)

  • updated for Vue 3

v3.0.1 (01/15/2022)

  • updated for Vue 3

v2.2.3 (12/16/2021)

  • update

v2.2.2 (12/15/2021)

  • migrate to vite

v2.2.1 (12/14/2021)

  • container z-index
  • style: update formatter settings

v2.2.0 (03/21/2021)

  • Added top and bottom positioning in mobile view

v2.1.0 (02/19/2021)

  • Added link option and better A11y support.

v2.0.0 (02/17/2021)

  • Added positionX and positionY to local-options, max toasts option to global-options and disableClick option to both local and global options.

v1.5.0 (02/11/2021)

  • Added default classes through local type option.

v1.3.3 (02/08/2021)

  • Added ‘center’ option for positionX

v1.2.17 (02/05/2021)

  • Update

v1.2.13 (02/03/2021)

  • Added TypeScript support plus new Composition API provide/inject option.

Download Details:

Author: Daniel-Knights

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-dk-toast --save--save

Add Comment