AToast

The AToast is an Atomic-level component used to display a toast notification for the user. It is composed of 5 different types of toasts:

• SUCCESS
• ERROR ( default toast type )
• INFO
• WARNING
• CUSTOM

Usage

The AToast is being instanced globally in app.vue. This way only one import is necessary when calling it in a component, that import being from useAToast.ts. To implement it in a component:

• Import the useAToast.ts:

<script setup lang="ts">
import { useAToast } from '@Atoms';
</script>

• Call the necessary parameters, TOAST_TYPES being optional if the toast is used as an error message:

<script setup lang="ts">
const { notify, TOAST_TYPES } = useAToast();
</script>

• Create a constant to make the title and message and call notify:

<script setup lang="ts">
const TOAST_WARNING = {
   title: 'Ooops',
   message: 'This is a warning message!',
};
notify(TOAST_WARNING);
</script>

INFO

A constant was created in this case to make the contents of the toast more semantic and legible