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

Install & Download:

# Yarn
$ yarn add vue-my-toasts
# NPM
$ npm i vue-my-toasts

Description:

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)