Press "Enter" to skip to content

A Lightweight Toast Notification Snack Bar Component | Mosha Vue Toastify

Mosha Vue Toastify is a fun and lightweight Vue 3 toast, notification, snack bar, or any way you want to call it a library.

toast and snackbar flutter, material snackbar, snackbar example, toast material ui, bootstrap snackbar, javascript toast message jquery example, jquery toast plugin

Features

  • Swipe to close
  • API configuration support
  • Handwritten in typewritten font, full support for printing
  • Ultra lightweight
  • Define the behavior for each toast
  • Fun progress bar to display the remaining time
  • More is coming!

How to make use of it:

Install and download:

# Yarn
$ yarn add mosha-vue-toastify

# NPM
$ npm i mosha-vue-toastify

1. Import the necessary components.

import { defineComponent } from 'vue'
import { createToast } from 'mosha-vue-toastify';
import 'mosha-vue-toastify/dist/style.css';

2. Enable button to display basic notification.

<template>
  <button @click="toast">Click Me</button>
</template>
export default defineComponent({
  name: 'myApp',
  setup () {
    const toast = () => {
      createToast('Basic Toast.')
    }
    return { toast }
  }
})

3. Add a title to the toast message.

createToast({
  title: 'Toast title', 
  description: 'Toast description'
})

4. Customization options available.

createToast({
  title: 'Toast title', 
  description: 'Toast description'
},{
  type: 'default', // 'info', 'danger', 'warning', 'success', 'default'
  timeout: 5000,
  showCloseButton: true,
  position: 'top-right', // 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'
  transition: 'bounce',
  hideProgressBar: false,
  swipeClose: true,
  toastBackgroundColor: '#fafafa',
  onClose: null
})
nametypedefaultdescription
type‘info’, ‘danger’, ‘warning’, ‘success’, ‘default’‘default’Give the toast different styles and icons.
timeoutnumber5000How many ms you want the toggle to close itself? Note: passing -1 to the timeout will stop the modal from closing.
position‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’, ‘top-center’, ‘bottom-center’‘top-right’Where do you want the toast to appear?
showCloseButtonbooleantrueDo you wanna show the close button ?
showIconbooleanfalseDo you wanna show the icon ?
transition‘bounce’, ‘zoom’, ‘slide’‘bounce’Which animation do you want?
hideProgressBarbooleanfalseDo we wanna hide the fancy progress bar?
swipeClosebooleantrueAllows the user swipe close the toast
toastBackgroundColorstringdefault colorCustomize the background color of the toast.
onClosefunctionN/AThis function will be called at the end of the toast’s lifecycle

Tiny Toast & Snackbar Component For Vue, Mosha Vue Toastify Plugin/Github, toast message jquery


See Demo And Download

Official Website(szboynono): Click Here

This superior jQuery/javascript plugin is developed by szboynono. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.