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.

All links in a practical list