A simple and flexible implementation of toast style notifications using Vue.js

If want to make a simple and flexible implementation of toast style notifications for Vue.js

then you can follow these steps to use this in your vue project

Table of Contents

Features

Functional Stacking, Positioning, Timing & Dismissal API. Breadstick exposes a function that allows you to to control the stacking, positioning and dismissal of authored toast style notifications.
Render whatever you want. Utilize the render callback to create beautiful custom notifications.
Functional default styles. Import the provided css for some nice styling defaults or write your own styles.
Vue framework-agnostic notification. Breadstick is un-opininated about the styling of your Vue toast notifications. It’s main strengths are in handling the business logic of stacking, positioning, timing & dismissal of your toast notifications.

Installation

Install breadstick and its peer dependency, animejs, using yarn or npm.

npm install breadstick animejs --save

You can then register BreadstickBakery as a Vue plugin.

import Vue from 'vue'
import { BreadstickBakery } from 'breadstick'

// This exposes `this.$breadstick` in your Vue template.
Vue.use(BreadstickBakery)

Installing with Nuxt

After installing Breadstick, we import it and register it as a client-side plugin. This is because Breadstick it makes use of some DOM APIs. Code is similiar to the Vue plugin shown above

Examples

Breadstick can be used to render different types of notifications out of the box. You can render simple string notifications as well as custom styled notifications. This makes it really convenient.

Basic usage

Invoke a notification using the notify method to display a message to the user. Breadstick defaults the notification duration to 5 seconds in the top position.

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

Using different positions

You can display notifications in different positions, including top-left, top, top-right, bottom-left, bottom, and bottom-right.

[
  'top-left', 
  'top', 
  'top-right', 
  'bottom-left', 
  'bottom', 
  'bottom-right'
].forEach(position => {
  this.$breadstick.notify("Using position " + position, {
    position
  })
})

🏠 Using custom element

With JSX or Vue’s render function, breadstick is able to render a custom element or Vue component

this.$breadstick.notify(
  <div>I am a custom HTML element</div>
)

🚚 With JSX

You can also use JSX if you like

// Import your custom `Alert` component and render it in breadstick
import Alert from './components/Alert'

export default {
  mounted () {
    breadstick.notify(({ onClose }) => {
      return (
        <Alert onClick={onClose}>
          An JSX Alert notification
        </Alert>
      )
    }
  }
}

Demo

Full project