loading...
Notification Vue js Component Icon

Published: 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

Author: Markus A. Wolf
Taipei / Taiwan – UX Designer and product owner - worked in Germany, California / Silicon Valley and now Taiwan for international clients.

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.

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('notifications', ['add']),
    addNewMessage(message) {
      this.add({
        message: this.$t(message.message),
        type: message.type,
        description: this.$t(message.description)
      })
    },
  },
}

Why did you use “The” in front of your Vue js Component?

Well this is called a single-instance component name. In the Vue js style guide you can find the strongly recommended rule that if your Component is and must be used only once it should begin with the “The” prefix, to imply that there can be only one - so to say a Highlander component :-).

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-enter-active,
.notifications-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.notifications-enter,
.notifications-leave-to {
  opacity: 0;
  transform: translateX(2rem);
}
.message-enter-active,
.message-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.message-enter,
.message-leave-to {
  opacity: 0;
  transform: translateY(-3rem);
}
/* purgecss end ignore */
</style>

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.