Set up the notification feature

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",

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",

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>

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')