vue-dk-toast

Lightweight toast-notification plugin for Vue3.

Install

CLI

npm i vue-dk-toast
Bash

CDN

<script src="https://unpkg.com/vue-dk-toast@0.1.23/dist/dkToast.umd.min.js"></script>
HTML

Import

CLI

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

createApp(App)
    .use(DKToast)
    .mount('#app');
Js

CDN

const app = Vue.createApp({});

app.use(DKToast);
app.mount('#app');
Js

Usage

this.$toast('Simple!');
Js
@click="$toast('Simple!')"
Js

Options

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');
Js

Local Options

this.$toast('Simple!', {
    duration: 1000,
    // Position not yet supported
    styles: {
        borderRadius: '25px',
    },
    slot: '<i class="fa fa-thumbs-up"></i>',
});
Js

GitHub