šŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more ā†’
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-dk-toast

Package Overview
Dependencies
Maintainers
1
Versions
84
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-dk-toast

Lightweight toast notification plugin for Vue 3

3.2.1
latest
Source
npm
Version published
Weekly downloads
593
34.77%
Maintainers
1
Weekly downloads
Ā 
Created
Source

vue-dk-toast

Lightweight toast-notification plugin for Vue 3 šŸž

npm vue

  • Lightweight ā˜ļø
  • Customizable šŸ§°
  • Easy to use šŸ„·
  • Mobile-friendly šŸ“±
  • Built-in TypeScript support šŸ”’
  • A11y compliant šŸ§‘ā€šŸ¦Æ

Demo
CodePen Demo

      ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’
    ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–ˆā–ˆā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–ˆā–ˆā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
    ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
    ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
    ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’
    ā–ˆā–ˆā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’ā–ˆā–ˆ
  ā–ˆā–ˆā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
ā–ˆā–ˆ  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
ā–ˆā–ˆ  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
ā–ˆā–ˆ  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
ā–ˆā–ˆ  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
ā–ˆā–ˆ  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
ā–ˆā–ˆ  ā–’ā–’ā–’ā–’ā–’ā–’ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–‘ā–’ā–’  ā–ˆā–ˆ
    ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’ā–’
            ā–ˆā–ˆ                ā–ˆā–ˆ
            ā–ˆā–ˆ                ā–ˆā–ˆ
            ā–ˆā–ˆ                ā–ˆā–ˆ
            ā–ˆā–ˆ                ā–ˆā–ˆ
            ā–ˆā–ˆā–ˆā–ˆ              ā–ˆā–ˆā–ˆā–ˆ

Install

CLI

npm i vue-dk-toast

or...

yarn add vue-dk-toast

CDN

<script src="https://unpkg.com/vue-dk-toast"></script>

It's recommended you use a specific version number to guard against breaking changes and load the script faster:

<script src="https://unpkg.com/vue-dk-toast@3.2.1"></script>

Import

CLI

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

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

CDN

const app = Vue.createApp({});

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

Usage

Options API:

this.$toast('Simple!');

or...

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

Composition API:

<script>
  import { inject } from 'vue';

  export default {
    setup() {
      const toast = inject('$toast');

      toast('Simple!');
    },
  };
</script>

Options

OptionTypeDefaultDescription
classString | String[]NoneCustom CSS class to be added to every toast (alongside .dk__toast). Must be an array of strings for multiple classes.
disableClickBooleanfalseDisable toast removal on click.
durationNumber5000Milliseconds before hiding toast.
pauseOnHoverBooleantruePause toast duration on mouseover, resume on mouseout.
maxNumberNoneMax number of toasts allowed on the page at any one time. Removes oldest existing toast first.
positionXStringrightPosition of container on the X axis - 'left', 'right' or 'center'.
positionYStringbottomPosition of container on the Y axis - 'top', or 'bottom'.
stylesObjectNoneCSS key/value pairs - supports vendor prefixes.

EXAMPLE:

createApp(App)
  .use(DKToast, {
    duration: 5000,
    pauseOnHover: true,
    positionY: 'bottom', // 'top' or 'bottom'
    positionX: 'right', // 'left', 'right' or 'center'
    disableClick: false,
    styles: {
      color: '#000',
      backgroundColor: '#fff',
      // Vendor prefixes also supported
    },
    class: 'custom-class', // Added to each toast,
    max: 10,
  })
  .mount('#app');

Local Options

Local options override global options where duplicate.

OptionTypeDefaultDescription
classString | String[]NoneCSS class to be added to this toast only (alongside .dk__toast and any globally set custom-class).
disableClickBooleanfalseDisable individual toast removal on click.
durationNumber5000Milliseconds before hiding toast.
pauseOnHoverBooleantruePause toast duration on mouseover, resume on mouseout.
link{ href: string, targetBlank?: boolean }noneTurns the toast into an <a> element which has a href of the one provided and optional target="_blank".
positionXStringrightPosition of container on the X axis - 'left', 'right' or 'center'.
positionYStringbottomPosition of container on the Y axis - 'top', or 'bottom'.
slotLeftStringNoneAny valid HTML as a string. Displays left of text.
slotRightStringNoneAny valid HTML as a string. Displays right of text.
stylesObjectNoneCSS key/value pairs. Supports vendor prefixes.
typeStringNoneDefault helper class - success, error or passive.

EXAMPLE:

this.$toast('Simple!', {
  duration: 1000,
  pauseOnHover: false,
  styles: {
    borderRadius: '25px',
  },
  link: {
    href: 'https://vue-dk-toast.netlify.app/',
    targetBlank: true,
  },
  // Any valid HTML, intended for icons
  slotLeft: '<i class="fa fa-user"></i>', // Add icon to left
  slotRight: '<i class="fa fa-thumbs-up"></i>', // Add icon to right
  class: 'local-class', // Added to this toast only
  type: 'success', // Default classes: 'success', 'error' and 'passive'
  positionX: 'center',
  positionY: 'top',
  disableClick: true,
});

TypeScript Support

vue-dk-toast comes with it's own built-in types for most cases, the exception being with the Composition API:

<script lang="ts">
  import { defineComponent, inject } from 'vue';
  import type { Toast } from 'vue-dk-toast';

  export default defineComponent({
    setup() {
      const toast = inject<Toast>('$toast');

      if (toast) toast('Simple!');
    },
  });
</script>

Security

For slotRight and slotLeft to work, it uses innerHTML to set the content. innerHTML is not secure as it adds the possibility for XSS attacks. If you set any user-inputted tags with these options, make sure you sanitise the string beforehand, else, adding something like <img src=x onerror="alert("XSS Attack!")" /> would run. You can use a library like DOMPurify to handle this for you.

Contributions welcome!

Keywords

vue
vue3
vuejs
plugin
toast
notification

FAQs

Package last updated on 13 Apr 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB

Security News

Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB

Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.

By Sarah GoodingĀ  - Ā Jul 04, 2025