Example of toaster

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'