Lightweight toast-notification plugin for Vue3.
CLI
npm i vue-dk-toast
CDN
<script src="https://unpkg.com/vue-dk-toast@0.1.23/dist/dkToast.umd.min.js"></script>
CLI
import { createApp } from 'vue';
import App from './App.vue';
import DKToast from 'vue-dk-toast';
createApp(App)
.use(DKToast)
.mount('#app');
CDN
const app = Vue.createApp({});
app.use(DKToast);
app.mount('#app');
this.$toast('Simple!');
@click="$toast('Simple!')"
createApp(App)
.use(DKToast, {
duration: 5000,
positionY: 'bottom', // 'top' or 'bottom'
positionX: 'right', // 'right' or 'left'
styles: {
color: '#000',
backgroundColor: '#fff',
// Vendor prefixes also supported
},
})
.mount('#app');
this.$toast('Simple!', {
duration: 1000,
// Position not yet supported
styles: {
borderRadius: '25px',
},
slot: '<i class="fa fa-thumbs-up"></i>',
});
Author: Daniel-Knights
Demo: https://vue-dk-toast.netlify.app/
Source Code: https://github.com/Daniel-Knights/vue-dk-toast
#vue #vuejs #javascript