FEAT: Implement Toast Notifications

[NabbeunNabi]

Problem

We need to decide on which library is the best library to use for toast or to make our own. This toast will be a way to show successes or error messages to users in a user friendly manner.

Success

Toast components are researched and implemented.

Requirements

• [ ] Research and choose best toast option
• [ ] Implement option

[NabbeunNabi]

Choices

Choice 1-vue-toastification

• Features of vue-toastification
• Compatible with Vue 3
• Written in TypeScript, with type support
• Inbuilt swipe-to-close interaction
• Ability to remove the toast programmatically
• A window focus() method pause feature
• Right-to-left and left-to-right text support
• You can find a full list of features on GitHub.

Choice 2-vue-toast-notification

• Support for Vue 3
• Available as a plugin or via the Composition API
• The available API methods let you add a few tweaks to your toast message
• Not fully customizable
• Dismissable on click
• No swipe gestures

Choice 3 BUILD OUR OWN

My selection

Based on my research, although I do not usually opt for adding libraries, I find Choice 1 to be the best. It seems to have the best reviews, is rather easy to implement, and fits well within our project. With TypeScript support and lots of customization.

It is easier to customize and use this library throughout the app based on the need instead of building a possible new component every time we want to change the toast notification to the user.