Using breadstick to create custom notifications
This simple Nuxt application shows how to use Breadstick's stacking API to render authored Vue toast notifications.
In this demo I replicated 3 Toast designs and rendered them inside Breadstick:
- Vercel's Toast
vue-notificationToast- Equal UI Component Library Notification.
All the Toasts used in this example were reimplemented using Chakra UI Vue for it's simple/flexible styling API.
The meat and potatoes of this example is in the plugins/breadstick.client.js file. Feel free to copy this and use it in your own applications.
If you're using raw Vue.js, you can view this gist that provides a similar high-level implementation.
Breadstick is a tiny Vue.js library that provides a simple stacking, positioning, and dismissal API for authored Vue.js toast notifications.
The reason I created it was to give me the flexibility of designing different toast notifications for different apps, so that let Breadstick handle the business logic of positioning, stacking and dismissal.
This allowed me to focus on building beautiful notifications, for different apps/themes, and not worry about them looking out of place. Breadstick let's you handle the appearance of your Toasts, but provides a powerful functional API you can use anywhere in your Vue applications.
Breadstick was inspired by React's Toasted Notes by Ben McMahen
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generateFor detailed explanation on how things work, check out Nuxt.js docs.