Notification Vue js Component Icon

已發表: June 2020

A ready to use Notification Vue js Component

This Vue js Component is based on Tailwind CSS so you can easily add it into your existing Tailwind project. If you would like to change some layouts - feel free - and use Tailwinds @apply directive to change the look.

Markus A. Wolf

作者: Markus A. Wolf
台北 / 台灣 – UX設計師和產品負責人-在德國,加利福尼亞/矽谷和現在的台灣為國際客戶服務。

Tutorial for a easy to use Notification Vue js Component

My idea was to have an easy to use Notification Component that works with Vues store so I can debug it easily and handle all the data in one place with Vuex’s actions.

All Notifications are stored in a module in the Vue js Vuex store. To show a new message just use the “add” action of the notification module. Multi language is not an issue because you handle all the texts by yourself. I defined a few types of messages like “error”, “info” or “success” but feel free to add your own ones.

All layout relevant style definitions are made with Tailwinds @apply directive so you can adapt it the way you want. For the time how long a message is shown I use a application wide constant file “containts.js” that exports NOTIFICATION_TIMEOUT. If you want to show more details in your message you can use the “description” to add an extra row below the headline.

CSS animations

My favorite - as you might see on my website - are animations so I added some nice ones to the Notification Vue js Component.

The first message in my Vue js component will fade in from the right and every next message will fall down from the first message. If you already use Purge CSS then you might be familiar with the way how you can whitelist directly inside the CSS definitions. I prefer this way of whitelisting for Purge CSS because so you can handle it in one component.

<style lang="postcss" scoped>
.notifications {
  position: fixed;
  width: calc(100% - 2rem);
  z-index: var(--notifications-zindex);
  top: calc(1rem + var(--navigation-height));
  right: 1rem;
  left: 1rem;

@screen md {
  .notifications {
    max-width: 400px;
    width: 40vw;
    left: auto;
/* purgecss start ignore */
.notifications-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
.notifications-leave-to {
  opacity: 0;
  transform: translateX(2rem);
.message-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
.message-leave-to {
  opacity: 0;
  transform: translateY(-3rem);
/* purgecss end ignore */

You can find the code example in my collection of best practices in Vue js and Tailwind CSS at Github: TheNotifications.vue and TheNotificationsMessage.vue.

If you want to explore more notification components you can find some nice ones in my link list.