Lightweight Toast Notification Plugin For Vue 3 – dk-toast

Description:

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';
createApp(App).use(DKToast).mount('#app');

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
})

Preview:

Lightweight Toast Notification Plugin For Vue 3 - dk-toast

Changelog:

v2.2.1 (04/10/2021)

  • container z-index

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: https://vue-dk-toast.netlify.app/

Download Link: https://github.com/Daniel-Knights/vue-dk-toast/archive/master.zip

Official Website: https://github.com/Daniel-Knights/vue-dk-toast

Install & Download:

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

You Might Be Interested In:

Tags:

Add Comment