DEV Community

Cover image for Building Vue.js Custom Notifications from Scratch
WebCraft Notes
WebCraft Notes

Posted on • Updated on • Originally published at webcraft-notes.com

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:

Starting project

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Check result and continue reading...

Top comments (0)