Tiny Toast & Snackbar Component For Vue 3 - Mosha Vue Toastify

Install & Download:

# Yarn
$ yarn add mosha-vue-toastify
# NPM
$ npm i mosha-vue-toastify

Description:

A lightweight yet fully configurable Vue notification library for creating toasts and snackbars on apps.

How to use it:

1. Import necessary components.

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

2. Enable a button to display a 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. Available customization options.

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
})