I think you need a breadstick 😄 — Introduction to Breadstick

Breadstick at work

Me: Hey, so today I want to introduce you to a notification library for Vue.js — Breadstick.

You(probably): Really? Kelvin, an article to introduce a notification library, really? 😏

So around the later part of 2019, I had the privilege of being acquainted with a phenomenal front-end developer at Akkadu— Jonathan Bakebwa (I think he is brilliant really).

From our conversations, he mentioned this little notification library he open-sourced called breadstick and I took a look and boy did I fall in ❤️ with it. Come with me as we take a bite of breadstick(pun intended):

Breadstick is for Vue developers who want to style their own notifications easily — Jonathan Bakebwa(Breadstick Author)

What is breadstick, really?

It is:

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

Why I think its really awesome:

1. You can render anything 🥳 — breadstick gives you a non-opinionated API to render whatever you want as your notification content.
2. It provides JS agnostic notifications i.e it can be incrementally or progressively(if you may) added to your application.
3. It has functional default styles out of the box — this means you can quickly import breadstick default CSS styling and voila you have a notification already.
4. Breadstick is highly flexible at a low cost.
5. Breadstick can be used as is, or it can be fully customized to render whatever you deem fit.

Let’s use breadstick 🥳 🥳

Now let me walk you through getting breadstick into the “oven”.

P.S: You can follow this article or you can just clone the associated repo and tinker with breadstick

Vue create breadstick-intro

So let’s create a new Vue application using the Vue CLI. First, navigate to your desired location and run:(assuming you’ve already installed node and vue-cli)

follow the prompt to create the Vue SPA. After a successful Vue SPA scaffolding, cd into breadstick-intro and open in your text editor(mine is vs code).

Install breadstick

According to the docs, to install breadstick and it’s peer dependency — animejs — all you have to do is run:

Installing breadstick

Usage

To emphasize, how flexible breadstick really is, you can use it as both a plugin and as a standalone module(which is powerful for building UI component libraries)

Recipe #1 — Using breadstick as a plugin.

P.S: If you cloned the repo, you can check out the branch breadstick-plugin.

In ./src/main.js, import and set up breadstick like the snippet below:

main.js

Voila!, breadstick is now available across your Vue.js application as $breadstick(how easy was that? really 😄). Now let’s display a notification, shall we?

In my ./src/App.vue component, I’d simply call breadstick in the mounted() lifecycle hook like so:

You could see how elegant the API is for displaying a simple notification. So spin up Vue dev server and see the result similar to below:

Breadstick in it’s out of the box glory

Recipe #2 — Importing breadstick as a module

P.S: If you cloned the repo, you can check out the branch breadstick-module-import.

By default, breadstick exports a class instance API you can use without the plugin architecture. This is useful for building UI component libraries. — Official Docs

I believe the above said it all. Now let’s see it in action.

breadstick as a module

Breadstick positions

P.S: If you cloned the repo, you can check out the branch breadstick-positions.

Aside from passing the notification message, you can pass in an options object to configure breadstick. One of the option’s object property is position — which controls what location on the screen, breadstick notification will be displayed. The below snippet shows an example usage:

P.S: Possible position values are: 'top' || 'bottom' || 'top-left' || 'top-right' || 'bottom-left' || 'bottom-right'

Note: See the docs for more properties for the options object and also the breadstick api.

🔥 breadstick 0.2.10

from the tweet above you could see breadstick has recently been optimized for performance improvement with a tiny bundle size less than 500B. Visit the docs for the whole breadstick usage. You could also see some advance usage of breadstick on the docs here.

Breadstick

Conclusion

I hope this article whet your appetite enough to give breadstick a whirl. I personally have begun converting most of my Vue.js application notification library to use breadstick, I just love the freedom it brings. You can check out the breadstick repo and also the official docs. Also, check out this code sandbox and this also for Vue and Nuxtjs starter template.

Thanks to Jonathan Bakebwa for reviewing this article.

Happy deploying 🚀 🚀 🚀