toaster

Displays messages to your users in flexible toasts

TIP

This plugin has a composable for easier use, after installing it you can use useToast

Basic usage

Action and link

Toast can have a link or an action

View the code

<template>
  <MazBtn
    color="theme"
    @click="toast.message('Message text')"
  >
    Message
  </MazBtn>

  <MazBtn
    color="info"
    @click="toast.info('Info message', { position: 'top', link: { href: 'https://www.loicmazuel.com' } })"
  >
    Info toast on top
  </MazBtn>

  <MazBtn
    color="danger"@
    @click="toast.error('Error message', { position: 'bottom', timeout: 1000 })"
  >
    Error toast on bottom with 1s timeout
  </MazBtn>

  <MazBtn
    color="warning"
    @click="toast.warning('Warning message', { position: 'top-right' })"
  >
    Warning toast on top right
  </MazBtn>

  <MazBtn
    color="success"
    @click="toast.success('Success message', { position: 'bottom-left', persistent: true })"
  >
    Persistent success toast on bottom left
  </MazBtn>

  <MazBtn
    color="success"
    @click="toast.message('No timeout toast', { timeout: false })"
  >
    Persistent with no timeout
  </MazBtn>
</template>

<script lang="ts" setup>
  import { useToast } from 'maz-ui'

  const toast = useToast()

  function showInfoWithLink () {
    toast.info('Toast with link, click -->', {
      link: {
        href: 'https://www.loicmazuel.com',
      }
    })
  }

  function showInfoWithExternalLink () {
    toast.warning('Toast with link', {
      link: {
        href: 'https://www.loicmazuel.com',
        target: '_blank',
        closeToast: true,
        text: 'Follow link'
      }
    })
  }

  function showInfoWithAction () {
    toast.error('Toast with action', {
      action: {
        func: () => new Promise(async (resolve) => {
          await sleep(3000)
          resolve()
          toast.success('Promise executed')
        }),
        text: 'Exec promise',
        closeToast: true
      }
    })
  }
</script>

Close toast programmatically

You can close a toast programmatically by using the close method returned by the toast function

function showToast () {
  const toastMessage = toast.message('Toast message closed by code')

  setTimeout(() => {
    toastMessage.close()
  }, 2000)
}

Install

main.ts or main.js

import { createApp } from 'vue'
import { installToaster, ToasterOptions } from 'maz-ui'

const app = createApp(App)

// DEFAULT OPTIONS
const toasterOptions: ToasterOptions = {
  position: 'bottom-right',
  timeout: 10_000,
  persistent: false,
}

app.use(installToaster, toasterOptions)

app.mount('#app')

Options

Usage

const options: ToasterOptions = {
  ...
}

const toast = useToast()

toast.message('Message text', options)

Type

type ToasterOptions = {
  /**
   * The position of the toast on the screen
   * @default 'bottom-right'
   */
  position?: ToasterPosition
  /**
   * The timeout is in ms, it's the time before the toast is automatically closed
   * if set to `false`, the toast will not be closed automatically
   * @default 10000
   */
  timeout?: number | boolean
  /**
   * If the toast is persistent, it can't be closed by user interaction (only on timeout or programmatically)
   * @default false
   */
  persistent?: boolean
  /**
   * Display an icon in the toast
   * @default true
   */
  icon?: boolean
  /**
   * The link will be displayed as a button in the toast
   * @default undefined
   */
  link?: {
    href: string
    text?: string
    /** @default _self */
    target?: string
    /** @default false */
    closeToast?: boolean
  }
  /**
   * The action will be displayed as a button in the toast
   * @default undefined
   */
  action?: {
    func: (..._arguments: unknown[]) => unknown
    text: string
    /** @default false */
    closeToast?: boolean
  }
}