Example of toaster
	
		
			
	
		
	
	
		
	
		
			All checks were successful
		
		
	
	
		
			
				
	
				Build and test backend / Build-backend (push) Successful in 2m27s
				
			
		
			
				
	
				Build and test backend / Test-backend (push) Successful in 1m21s
				
			
		
			
				
	
				deploy to production / deploy-frontend (push) Successful in 25s
				
			
		
			
				
	
				deploy to production / deploy-backend (push) Successful in 2m3s
				
			
		
			
				
	
				Build and test FrontEnd / Build-frontend (push) Successful in 24s
				
			
		
			
				
	
				Build and test FrontEnd / Test-frontend (push) Successful in 22s
				
			
		
		
	
	
				
					
				
			
		
			All checks were successful
		
		
	
	Build and test backend / Build-backend (push) Successful in 2m27s
				
			Build and test backend / Test-backend (push) Successful in 1m21s
				
			deploy to production / deploy-frontend (push) Successful in 25s
				
			deploy to production / deploy-backend (push) Successful in 2m3s
				
			Build and test FrontEnd / Build-frontend (push) Successful in 24s
				
			Build and test FrontEnd / Test-frontend (push) Successful in 22s
				
			This commit is contained in:
		
							
								
								
									
										30
									
								
								frontend/package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										30
									
								
								frontend/package-lock.json
									
									
									
										generated
									
									
									
								
							@ -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",
 | 
			
		||||
 | 
			
		||||
@ -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",
 | 
			
		||||
 | 
			
		||||
@ -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">
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,7 @@
 | 
			
		||||
import './assets/main.css'
 | 
			
		||||
 | 
			
		||||
import 'vue3-toastify/dist/index.css';
 | 
			
		||||
 | 
			
		||||
import { createApp } from 'vue'
 | 
			
		||||
import App from './App.vue'
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user