Simple Flexible Toast Notification Component – Vue Breadstick

Install & Download:

# Yarn
$ yarn add breadstick
# NPM
$ npm install breadstick --save

Description:

Breadstick is a brand new Vue.js notification component to render flexible, customizable toast messages on the web app.

See Also:

• 7 Best Material Design Inspired Toast Components

How to use it:

1. Install and register the Vue Breadstick component.

import Vue from 'vue'
import Breadstick from 'breadstick'
Vue.use(Breadstick)

// or
const breadstick = new Breadstick()

2. Create a basic toast message using the notify method.

this.$breadstick.notify('Toast Message Here');

3. It also works with JSX and Vue.js render function.

import Alert from './components/Alert'
export default {
  name: 'app',
  mounted () {
    const showAlert = () => alert('Hello!')
    breadstick.notify(({ onClose }) => {
      return (
        
          An JSX Alert notification
        
      )
  }
}

import Alert from './components/Alert'
export default {
  name: 'app',
  mounted () {
    this.$breadstick.notify(({ h, onClose }) => {
      return h(Alert, {
        on: {
          click: onClose
        }
      }, 'A render function Alert notification')
    })
  }
}

4. Change the position of the toast message. Available positions: ‘top’, ‘bottom’, ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’.

const breadstick = new Breadstick({
      position: 'bottom'
})

5. Change the time to wait before auto dismissing the toast message. Default: 5000ms.

const breadstick = new Breadstick({
      duration: 6000
})

Preview:

Changelog:

05/20/2020

• Update