communication from client to nuxt server

components/LoginForm.vue

@@ -32,21 +32,76 @@
         </div>
       </div>
     </div>
-    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
+    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
+      @click="handleLogin">
   </form>
 </template>
 
 
 <script setup>
 import { ref } from 'vue';
+// import LoginService from '../server/loginService.js';
 
-const darkMode = ref(true)
+const darkMode = ref(true);
 </script>
 
 <script>
 export default {
   name: "LoginForm",
-};
+  methods: {
+    async handleLogin() {
+      const username = document.getElementById('username-input').value;
+      const password = document.getElementById('password-input').value;
+
+      const { data, error } = await useFetch('/api/login', {
+        method: 'post',
+        body: {
+          username: username,
+          password: password
+        }
+      })
+      if (!data.value) {
+        console.log(error.value)
+      } else {
+        console.log(data.value)
+      }
+      // }).then(res => {
+      //   const data = res.data.value
+      //   const error = res.error.value
+      //   if (error) {
+      //     // dealing error
+      //     // console.log(error)
+      //   } else {
+      //     console.log(data)
+      //   }
+      // }, error => {
+      //   console.log('exception...')
+      //   console.log(error)
+      // })
+
+      // console.log(data.value)
+      // console.log(error)
+      // }
+
+      // // const response = await LoginService.login(data);
+      // const { response } = await useFetch('/api/login')
+      // console.log(response)
+
+
+      // Axios.post('/api/login', data, {
+      //   headers: {
+      //     'Content-Type': 'application/json'
+      //   }
+      // })
+      //   .then(function (response) {
+      //     console.log(response);
+      //   })
+      //   .catch(function (error) {
+      //     console.log(error);
+      //   });
+    }
+  }
+}
 </script> 
   
 

server/api/login.ts

@@ -0,0 +1,15 @@
+export default defineEventHandler(async (event) => {
+    const body = await readBody(event)
+
+    if ((body.username == 'test') && (body.password == 'asd')) {
+        setResponseStatus(event, 202)
+        return {
+            login: 'successful'
+        }
+    } else {
+        throw createError({
+            statusCode: 400,
+            statusMessage: 'Login failed',
+        })
+    }
+})