Building Vue.js Custom Notifications from Scratch

Check this post in my web notes

In our previous tutorial, 'Mastering Reusable Modals in Vue.js: Enhancing UI Flexibility', we explored the creation of versatile modals for various user interactions. However, another essential aspect of user engagement lies in the realm of "Notifications." Effectively informing users about critical events such as authentication status, messages, and request outcomes (both successful and otherwise) is vital for enhancing the user experience within your application. In this new post, we will dive deep into the process of 'Building Vue.js Custom Notifications from Scratch.' Let's embark on this journey to create seamless and informative notifications for your Vue.js applications.

Step 1: Prepare project

As usual, to start a new project you can use the 'Quick Start' tutorial from official Vue.js documentation or check the previous post with all instructions. I will not create a new test project, I will only rebuild the previous project (remove modal components and all other unnecessary files), as a result, I'll get a default structured project with some styles:

Step 2. Create "Notification" and "Notification Container"

Okay, we can easily repeat our tutorial about modals, change some styles, show it on the top of the window, and call it a notification. Agree, looks like a good idea and we will save time, but some disadvantages need to be noted. What if we want to show several notifications at the same time? How to update notification type dynamically? And so on... Let's start working and begin with a simple notification component.
In our components folder, we will create a "Notification.vue" component. Add "position:absolute" and "z-index: 100" so that it is always on the top. Easy... Here is my simple "Notification" component:

<template>
    <div class="container">
        <div class="alert alert-primary">
            <p class="notification__text">Notification message</p>
            <span class="close">
                &times;
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: "Notification"
}
</script>

Nothing special, only a field with some text. Next, we will create a "Notification Container" component. This component will receive notifications as props from our main App.vue and render an array of our messages so that we can show and add them dynamically. We will set a fixed position on the top of the screen for more visibility.

<template>
    <div class="notification__container">
        <Notification v-for="(notification, index) of notificationsList"
            :key="index"
            :notification="notification" />
    </div>
</template>

<script>
import Notification from './Notification.vue';
export default {
    name: 'NotificationContainer',
    components: {
        Notification
    },
    props: {
        notificationsList: {
            type: Array,
            required: true
        }
    }
}
</script>

<style scoped>
.notification__container {
    position: fixed;
    top: 15%;
    right: 2%;
    width: 35%;
    z-index: 999;
}
</style>

Step 3. Show "Notification"

Now we need to add functionality to our App.vue component that will push message objects into our notification list and render them into a web page. First of all, we will add buttons to our page and create the function "showMessage()" that will show different notifications. Next, create a "close()" function that will remove notifications from the list and I think that's all. Ohh... and here is my App.vue final version:

<template>
  <NotificationContainer 
    :notificationsList="notificationsList"
    @close="close($event)"/>
  <main>
    <div class="gradient-background">
      <header>
        <h1>Mastering Notifications</h1>
      </header>
      <div class="button-container">
        <button class="custom-btn btn-1" 
          @click="showMessage(
            {notificationType: 'primary', message: 'Welcome!'}
          )">
            Test 1
          </button>
        <button class="custom-btn btn-1" 
          @click="showMessage(
            {notificationType: 'warning', message: 'Be carefull!'}
          )">
          Test 2
        </button>
        <button class="custom-btn btn-1" 
          @click="showMessage(
            {notificationType: 'success', message: 'Congratulations!'}
          )">
          Test 3
        </button>
      </div>
    </div>
  </main>
</template>

<script>
import NotificationContainer from "./components/NotificationContainer.vue";
export default {
  components: {
    NotificationContainer
  },
  data() {
    return {
      notificationsList: []
    }
  },
  methods: {
    showMessage(notification) {
      this.notificationsList.push(notification);
    },
    close(notification) {
      let newArray = this.notificationsList.filter(
        item => item.message !== notification.message
      );
      this.notificationsList = newArray;
    }
  }
};
</script>

Check result and continue reading...