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:
Changelog:
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: 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