Example of toaster

frontend/package-lock.json

@@ -8,8 +8,8 @@
       "name": "clyde",
       "version": "0.0.0",
       "dependencies": {
-        "toastify-js": "^1.12.0",
-        "vue": "^3.4.15"
+        "vue": "^3.4.15",
+        "vue3-toastify": "^0.2.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.3",
@@ -2168,11 +2168,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/toastify-js": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
-      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
-    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -2402,6 +2397,27 @@
       "integrity": "sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==",
       "dev": true
     },
+    "node_modules/vue3-toastify": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.1.tgz",
+      "integrity": "sha512-u4i5LCu1q5qs4L4Kbjb4u8NipCS8ox1fCHQ6XFS62676xnA6Q/AJRpZEkAurTMp723LeH6eQX6k9+24bKf1T4Q==",
+      "workspaces": [
+        "docs",
+        "playground"
+      ],
+      "engines": {
+        "node": ">=16",
+        "npm": ">=7"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",

frontend/package.json

@@ -10,8 +10,8 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "toastify-js": "^1.12.0",
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "vue3-toastify": "^0.2.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",

frontend/src/App.vue

@@ -1,10 +1,15 @@
 <script setup>
 	import 'https://kit.fontawesome.com/fb3bbd0a95.js'
-	import Toastify from 'toastify-js'
+	import { toast } from 'vue3-toastify';
 	import { ref } from 'vue'
 
 	const test = ref();
-	fetch("http://localhost:8080/ping").then((e) => { return e.json() }).then(e => console.log(e) );
+
+	async function draw(e) {
+		test.value = (await fetch("http://localhost:8080/ping"));
+		test.value = await test.value.json();
+		toast(test.value['txt']);
+	}
 </script>
 
 <template>
@@ -22,7 +27,7 @@
     <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
         <li title="Home">
             <a href="#home">
-                <img  src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
+                <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
             </a>
         </li>
         <li title="Home">

frontend/src/main.js

@@ -1,5 +1,7 @@
 import './assets/main.css'
 
+import 'vue3-toastify/dist/index.css';
+
 import { createApp } from 'vue'
 import App from './App.vue'