Flexible Toast Notification Library For Vue – vue-my-toasts

A flexible, customizable toast component that is compatible with popular frameworks like TailwindCSS and Bootstrap.

How to use it:

1. Import and register the component.

// core
import VueMyToasts from 'vue-my-toasts'
import 'vue-my-toasts/dist/vue-my-toasts.css'

// your custom component
import TailwindComponent from 'vue-my-toasts/src/components/toasts/TailwindComponent'
import DemoToast from 'vue-my-toasts/src/components/toasts/BootstrapComponent'
import YourToastComponent from 'vue-my-toasts/components/toasts/YourToastComponent'

2. Register the component.

Vue.use(VueMyToasts, {
  component: YourToastComponent,
  options: {
    // options here
  }
})

3. Create toast notifications with these APIs.

// basic message
$toasts.base('message', options)

// success message
$toasts.success('message', options)

// warning message
$toasts.warning('message', options)

// error message
$toasts.error('message', options)

// push a message from a raw toast payload
$toasts.push(options)

// remove a toast
$toasts.remove(id)

// update configs
$toasts.updateConfig(newConfig)

Preview:

Download Details:

Author: Tahul

Live Demo: https://vue-my-toasts.netlify.app/

Download Link: https://github.com/Tahul/vue-my-toasts/archive/master.zip

Official Website: https://github.com/Tahul/vue-my-toasts

Install & Download:

# Yarn
$ yarn add vue-my-toasts

# NPM
$ npm i vue-my-toasts