1
0
forked from PGL/Clyde

Example of toaster

This commit is contained in:
Debucquoy Anthony 2024-02-28 17:57:13 +01:00
parent 56df39b584
commit 7c9fe9235c
Signed by: tonitch
GPG Key ID: A78D6421F083D42E
4 changed files with 35 additions and 12 deletions

View File

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

View File

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

View File

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

View File

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