Vue Toast Notification Component – iamrohit.in

A simple but flexible implementation of toast style notifications for Vue.js. These notification help user to alert any noted point. Like if you saved anything, alert with success message of any thing processing internally when completed notify via toast notification.

? Features

• An imperative API. This means that you don’t need to set component state or render elements to trigger notifications. Instead, just call a function. This makes it very user friendly for component library authors.
• Render whatever you want. Utilize the render callback to create entirely custom notifications.
• Functional default styles. Import the provided css for some nice styling defaults or write your own styles.
• JS agnostic notifications. Breadstick can be incrementally adopted to your application since it uses the already progressive Vue.js under the hood.
  
  

⚡️ Installation

yarn install breadstick
or
npm install breadstick --save

You can then register breadstick as a plugin.

import Vue from 'vue'
import Breadstick from 'breadstick'

Vue.use(Breadstick)

// You can now access the `breadstick` instance
// via `this.$breadstick` in your application.

You can also use breadstick’s breadstick API without the plugin architecture. This is useful for building UI component libraries.

import Breadstick from 'breadstick'
const breadstick = new Breadstick()

// You can now access the `breadstick` instance
// via `breadstick` in your application.

? How it works

Simply import and create a new breadstick instance and call the notify method. Breadstick will expose a render function API that you can use to render custom notifications inside of breadstick. Alternatively you can also use plain JSX to call the notify method.

Rendering custom components inside of breadstick gives component library authors flexibility with styling of notifications. This works well with design systems too. The render function/JSX API exposes the exact same render function used inside of Vue templates so all other component options are accessible.

?Examples

Breadstick’s API only works with Vue’s render function or JSX API to render custom components inside of notifications.

? With basic string messsage

this.$breadstick.notify('? Show me the pancakes')

// With options:
this.$breadstick.notify('? Show me the pancakes', {
  position: 'top' || 'bottom' || 'top-left' || 'top-right' || 'bottom-left' || 'bottom-right',
  duration: 8000 // Default is 5000
})

? With Vue’s render function callback

import Alert from './components/Alert'

export default {
  name: 'app',
  mounted () {
    // Breadstick renders your custom `Alert` component
    this.$breadstick.notify(({ h, onClose }) => {
      return h(Alert, {
        on: {
          click: onClose
        }
      }, 'A render function Alert notification')
    })
  }
}

? With JSX

import Alert from './components/Alert'

export default {
  name: 'app',
  mounted () {
    const showAlert = () => alert('Hello!')
    // Breadstick renders your custom `Alert` component
    breadstick.notify(({ onClose }) => {
      return (
        
          An JSX Alert notification
        
      )
  }
}

See live demo and download source code.

This awesome script developed by Intera. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Related