Breadstick

A simple but flexible implementation of toast style notifications for Vue.js.

🌟 Inspired by toasted-notes for React - which I think is really cool. ❤️

Demo

🌟 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.

🥳 Getting Started

Here are a few Codesandbox starters you can use to get started with Breadstick in your Vue or Nuxt App.

• Vue.js Starter: http://bit.ly/breadstick-vue
• Nuxt.js Starter: http://bit.ly/breadstick-nuxt

⚡️ Installation

yarn install breadstick
or
npm install breadstick --save

You can then register breadstick as a plugin.

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

Vue.use(BreadstickBakery)
// You can now access the `breadstick` instance
// via `this.$breadstick` in your application.

By default, breadstick exports a class instance API you can use 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 (
        <Alert onClick={onClose}>
          An JSX Alert notification
        </Alert>
      )
  }
}

🔖 TODO:

Breadstick still has a few more features coming up. These include:

• Nuxt Server-side rendering support
• Replace peer dependency animate-velocity with anime.js for animations. Size benefits i.e 22KB -> 6KB
• Replace internal portal with PortalVue
• Create docs site with Vuepress

🦑 Contributors

• Jonathan Bakebwa
• This could be you :)

🤝 Contributing

Here's our contribution guide.

❤️ Support this project

If you like this project, please consider supporting it by buying my a coffee!

Buy me a coffee
Made with ❤️ by Jonathan Bakebwa 🇺🇬