From e393ca1ea0c2db8f58c0598d9082417c35dc8940 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 21 Sep 2023 17:10:12 +0200
Subject: [PATCH] Set up the notification feature

---
 package-lock.json         | 10 ++++++++++
 package.json              |  1 +
 resources/js_vue3/App.vue |  1 +
 resources/js_vue3/app.js  |  2 ++
 4 files changed, 14 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 67e11077..3d818d94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "devDependencies": {
+                "@kyvg/vue3-notification": "^3.0.2",
                 "@vitejs/plugin-vue": "^4.3.4",
                 "axios": "^1.1.2",
                 "bulma": "^0.9.4",
@@ -458,6 +459,15 @@
             "optional": true,
             "peer": true
         },
+        "node_modules/@kyvg/vue3-notification": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@kyvg/vue3-notification/-/vue3-notification-3.0.2.tgz",
+            "integrity": "sha512-t6PWPWggVqehX0BJZbqOttfKe3oUOrkgYoNQWSx8gwz8+pIRygQNT5MrewaIATdiU3bf//Yyto/wEm7vYl17Uw==",
+            "dev": true,
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/@types/node": {
             "version": "20.4.0",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz",
diff --git a/package.json b/package.json
index 9e6c1793..909ddd1f 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@kyvg/vue3-notification": "^3.0.2",
         "@vitejs/plugin-vue": "^4.3.4",
         "axios": "^1.1.2",
         "bulma": "^0.9.4",
diff --git a/resources/js_vue3/App.vue b/resources/js_vue3/App.vue
index 114dc095..12e12471 100644
--- a/resources/js_vue3/App.vue
+++ b/resources/js_vue3/App.vue
@@ -3,6 +3,7 @@
 </script>
 
 <template>
+    <notifications id="vueNotification" role="alert" width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" />
     <main class="main-section">
         <RouterView />
     </main>
diff --git a/resources/js_vue3/app.js b/resources/js_vue3/app.js
index 9290fc51..28f98971 100644
--- a/resources/js_vue3/app.js
+++ b/resources/js_vue3/app.js
@@ -5,10 +5,12 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import router from './router'
+import Notifications from '@kyvg/vue3-notification'
 
 const app = createApp(App)
 
 // app.use(createPinia())
 app.use(router)
+app.use(Notifications)
 
 app.mount('#app')