Lightweight toast-notification plugin for Vue 3

by Vue.js Examples

vue-dk-toast

Lightweight toast-notification plugin for Vue3.

View Demo View Github

Install

CLI

npm i vue-dk-toast

CDN

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

Import

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

Usage

this.$toast('Simple!');

@click="$toast('Simple!')"

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

Local Options

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

GitHub