How to custom Vue notifications API with Breadstick.

notify-plugin.js

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

// 1. Create a new breadstick instance
export const breadstick = new Breadstick()

// 2. Import your custom Notification component.
//    You can use it to render your notifications message.
const MyNotification = () => import('@/components/MyNotification.vue')

// 3. Next let's create a function to handle the rendering
//    of your notification. You can pass the `notify`
//    arguments as props to your `MyNotification` component.

const notify = (message, options) => {
  if (!message || message === '') {
    console.warn('[notification]: The notification expects a message before rendering the Toast component.')
    return
  }

  if (!options) {

    //  Breadstick exports a `notify` method that
    //  you can use to invoke a notification
    return breadstick.notify(({ h, onClose }) => {
      return h(MyNotification, {
        props: {
          onClose
        },
      }, [message])
    })
  }
  
  return breadstick.notify(({ h, onClose }) => {
    return h(MyNotification, {
      ... options.type && { class: [options.type] },
      props: {
        onClose
      },
    }, [
      options.title && h('span', {
        slot: 'title',
      }, options.title),
      message
    ])
  }, {
    ...options.position && { position: options.position },
    ...options.duration && { duration: options.duration }
  })
}


// 4. Attach our notification method to Vue prototype
//    if you wish to access it in your Vue components
Vue.prototype.$notify = notify

// 5. Attach the breadstick API to Vue's prototype
//    to render custom components if also want to.
Vue.prototype.$breadstick = breadstick

// 6. Since this is just a Javascript function, you are not
//    limited ti using the `notify` function in Vue components only.
//    You can also export this function and import to another file
//    where you can invoke the notification

export default notify

Please run this before you mount your Vue app.

In the Vue template you can then invoke this by running:

this.$notify('This is the notification message')

Can you share a sample of MyNotification.vue?

Hi, @rlightner! Sorry for the late reply. I've made an example a few months ago on this repo that re-implements this with some components in the repository

https://github.com/codebender828/breadstick-examples/blob/master/plugins/breadstick.client.js