Notification.vue: transition via vuejs, trying to generate unique key

src/components/Notification.vue

@@ -1,17 +1,15 @@
 <template>
 
-<div class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
-    <transition-group name="fade">
-        <div v-for="(note, index) in notifications" :key="index" data-bs-delay="2000" data-bs-autohide="true" class="show fade toast border-0 text-white" :class="toastClasses(note.type)" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="d-flex">
-            <div class="toast-body">
-                {{note.text}}
-            </div>
-            <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+    <transition-group name="toasts" tag="div" class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
+        <div v-for="(note, index) in notifications" :key="note.randomKey" class="show toast border-0 text-white" :class="`bg-${note.type}`" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                    {{note.text}}
+                </div>
+                <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto"></button>
             </div>
         </div>
     </transition-group>
-</div>
 
 </template>
 
@@ -26,16 +24,23 @@ function destroyAlert(index : number) {
     notes.removeAlert(index)
 }
 
-function toastClasses(type : string){
-    return {
-        'bg-danger': type === 'danger',
-        'bg-success' : type === 'success',
-        'bg-warning' : type === 'warning'
-    }
-}
-
 </script>
 
 <style scoped>
 
+.toast-container {
+    z-index: 10000;
+}
+
+.toasts-move {
+    transition: transform 0.8s ease;
+}
+
+.toasts-enter-active, .toasts-leave-active {
+  transition: opacity 0.7s;
+}
+.toasts-enter-from, .toasts-leave-to /* .list-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
 </style>

src/stores/notifications.ts

@@ -3,8 +3,8 @@ import { defineStore, acceptHMRUpdate } from 'pinia'
 export const useNotifications = defineStore('notifications', {
     state: () => {
         return {
-            /**@type {{type: string, text: string}[]} */
-            notifications: new Array<{type: string, text: string}>()
+            /**@type {{type: string, text: string, randomKey: string}[]} */
+            notifications: new Array<{type: string, text: string, randomKey: string}>()
         }
     },
 

src/stores/user.ts

@@ -1,6 +1,8 @@
 import { defineStore, storeToRefs } from 'pinia'
-import axios, {AxiosResponse, AxiosError} from 'axios'
 import { useNotifications } from './notifications'
+import { getUnixTime } from 'date-fns'
+import { AxiosError } from 'axios'
+import axios from 'axios'
 
 type AuthSuccResult = {
 	notification: {
@@ -44,6 +46,7 @@ export const useUser = defineStore('userStore', {
                 notifications.value.push({
                     type: response.data.notification.type,
                     text: response.data.notification.text,
+                    randomKey: getUnixTime(new Date()).toString()
                 })
 
                 return true
@@ -54,7 +57,8 @@ export const useUser = defineStore('userStore', {
 
                     const note = {
                         type: data.notification.type,
-                        text: data.notification.text
+                        text: data.notification.text,
+                        randomKey: getUnixTime(new Date()).toString()
                     }
 
                     notifications.value.push(note)