Form, validation & toast

package.json

@@ -8,7 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",

src/components/AddTransaction.vue

@@ -1,17 +1,48 @@
 <template>
   <h3>Add new transaction</h3>
-  <form id="form">
+  <form id="form" @submit.prevent="onSubmit">
     <div class="form-control">
       <label for="text">Text</label>
-      <input type="text" id="text" placeholder="Enter text..." />
+      <input type="text" id="text" placeholder="Enter text..." v-model="text" />
     </div>
     <div class="form-control">
       <label for="amount"
         >Amount <br />
         (negative - expense, positive - income)</label
       >
-      <input type="text" id="amount" placeholder="Enter amount..." />
+      <input
+        type="text"
+        id="amount"
+        placeholder="Enter amount..."
+        v-model="amount"
+      />
     </div>
     <button class="btn">Add transaction</button>
   </form>
 </template>
+
+<script setup>
+import { useToast } from 'vue-toastification';
+import { ref } from 'vue';
+
+const text = ref('');
+const amount = ref('');
+
+// Get toast interface
+const toast = useToast();
+
+const onSubmit = () => {
+  if (!text.value || !amount.value) {
+    // Display a toast error message if either field is empty
+    toast.error('Both fields must be filled.');
+    return;
+  }
+
+  // Proceed with form submission logic here...
+  console.log('Form submitted:', text.value, amount.value);
+
+  // Clear form fields
+  text.value = '';
+  amount.value = '';
+};
+</script>

src/main.js

@@ -1,6 +1,9 @@
-import './assets/style.css';
-
 import { createApp } from 'vue';
+import Toast from 'vue-toastification';
+import 'vue-toastification/dist/index.css';
+import './assets/style.css';
 import App from './App.vue';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+app.use(Toast);
+app.mount('#app');