vue-dk-toast

vue-dk-toast

Lightweight toast-notification plugin for Vue 3 🍞

• Lightweight ☁️
• Customizable 🧰
• Easy to use 🥷
• Mobile-friendly 📱
• Built-in TypeScript support 🔒
• A11y compliant 🧑‍🦯

Demo
CodePen Demo

• vue-dk-toast
  • Install
  • Import
  • Usage
  • Options
  • Local Options
  • TypeScript Support
  • Security

      ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
  ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
▒▒▒▒▒▒░░░░░░░░░░██░░░░░░░░░░░░░░██░░░░░░▒▒
  ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
    ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
    ▒▒▒▒▒▒░░░░░░░░░░░░██████░░░░░░░░▒▒
    ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒
    ██▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒██
  ██▒▒▒▒▒▒░░░░░░░░▒▒░░░░░░░░░░░░░░░░▒▒  ██
██  ▒▒▒▒▒▒░░░░░░░░░░░░░░░░▒▒░░░░░░░░▒▒  ██
██  ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒  ██
██  ▒▒▒▒▒▒░░▒▒░░░░░░░░░░░░░░░░░░▒▒░░▒▒  ██
██  ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒  ██
██  ▒▒▒▒▒▒░░░░░░░░░░░░▒▒░░░░░░░░░░░░▒▒  ██
██  ▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒  ██
    ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
            ██                ██
            ██                ██
            ██                ██
            ██                ██
            ████              ████

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.0.0"></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

Option	Type	Default	Description
class	String | String[]	None	Custom CSS class to be added to every toast (alongside .dk__toast). Must be an array of strings for multiple classes.
disableClick	Boolean	false	Disable toast removal on click.
duration	Number	5000	Milliseconds before hiding toast.
max	Number	None	Max number of toasts allowed on the page at any one time. Removes oldest existing toast first.
positionX	String	right	Position of container on the X axis - 'left', 'right' or 'center'.
positionY	String	bottom	Position of container on the Y axis - 'top', or 'bottom'.
styles	Object	None	CSS key/value pairs - supports vendor prefixes.

EXAMPLE:

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

Local Options

Option	Type	Default	Description
class	String | String[]	None	CSS class to be added to this toast only (alongside .dk__toast and any globally set custom-class).
disableClick	Boolean	false	Disable individual toast removal on click.
duration	Number	5000	Milliseconds before hiding toast. Overrides global duration.
link	{ href: string, targetBlank?: boolean }	none	Turns the toast into an <a> element which has a href of the one provided and optional target="_blank".
positionX	String	right	Position of container on the X axis - 'left', 'right' or 'center'. Overrides global positionX.
positionY	String	bottom	Position of container on the Y axis - 'top', or 'bottom'. Overrides global positionY.
slotLeft	String	None	Any valid HTML as a string. Displays left of text.
slotRight	String	None	Any valid HTML as a string. Displays right of text.
styles	Object	None	CSS key/value pairs. Supports vendor prefixes.
type	String	None	Default helper class - success, error or passive.

EXAMPLE:

this.$toast('Simple!', {
  duration: 1000,
  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!