change notification system to vue-toastification

frontend/composables/useToast.js

@@ -0,0 +1,3 @@
+import {useToast} from "vue-toastification";
+
+export default () => useToast()

frontend/nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
-import path from "path";
+import path from 'path'
 
 export default defineNuxtConfig({
     ssr: false,
@@ -32,7 +32,6 @@ export default defineNuxtConfig({
     modules: [
         '@vueuse/nuxt',
         'floating-vue/nuxt',
-        'nuxt3-notifications',
     ],
 
     nitro: {
@@ -41,6 +40,14 @@ export default defineNuxtConfig({
         }
     },
 
+    build: {
+        transpile: ['vue-toastification'],
+    },
+
+    css: [
+        'vue-toastification/dist/index.css'
+    ],
+
     telemetry: false,
     compatibilityDate: "2024-12-28",
 })

frontend/package.json

@@ -22,10 +22,10 @@
         "marked-base-url": "^1.1.3",
         "moment": "^2.30.1",
         "nuxt": "^3.11.2",
-        "nuxt3-notifications": "^1.2.0",
         "plyr": "^3.7.8",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "vue-toastification": "^2.0.0-rc.5"
     },
     "devDependencies": {}
 }

frontend/plugins/toast.js

@@ -0,0 +1,9 @@
+import Toast from 'vue-toastification'
+
+export default defineNuxtPlugin(nuxtApp => nuxtApp.vueApp.use(Toast, {
+    transition: "Vue-Toastification__bounce",
+    maxToasts: 5,
+    closeOnClick: false,
+    newestOnTop: true,
+    showCloseButtonOnHover: true,
+}))

frontend/utils/index.js

@@ -1,6 +1,4 @@
-import {useNotification} from '@kyvg/vue3-notification'
-
-const {notify} = useNotification();
+const toast = useToast()
 
 const AG_SEPARATOR = '.'
 
@@ -165,28 +163,29 @@ const ucFirst = (str) => {
  * @returns {void}
  */
 const notification = (type, title, text, duration = 3000) => {
-    let classes = ''
+    let method = '', options = {
+        timeout: duration,
+    }
 
     switch (type.toLowerCase()) {
         case 'info':
         default:
-            classes = 'has-background-info has-text-white'
+            method = 'info'
             break
         case 'success':
-            classes = 'has-background-success has-text-white'
+            method = 'success'
             break
         case 'warning':
-            classes = 'has-background-warning has-text-white'
+            method = 'warning'
             break
         case 'error':
-            classes = 'has-background-danger has-text-white'
-            if (duration === 3000) {
-                duration = 10000
+            method = 'error'
+            if (3000 === duration) {
+                options.timeout = 10000
             }
             break
     }
-
-    return notify({title, text, type: classes, duration})
+    toast[method](text, options)
 }
 
 /**