initial input item setp

src/components/UI/UIDetails/inputItem.vue

@@ -0,0 +1,42 @@
+<template>
+  {{ input }}
+</template>
+
+<script>
+ import { defineComponent, ref, onUnmounted } from "vue";
+ export default defineComponent({
+     name: "InputItem",
+     setup() {
+        const input = ref("");
+
+         function handleInput(e) {
+           const inputCode = e.keyCode;
+           const cmd = String.fromCharCode(inputCode).toLowerCase();
+
+             switch(inputCode) {
+                case 13:
+                  console.log('enter was pressed');
+                  break;
+                case 8:
+                  console.log('delete was pressed');
+                  input.value = input.value.slice(0, -1);
+                  break;
+                 default:
+                  input.value += cmd;
+             }
+         }
+
+         window.addEventListener("keydown", handleInput);
+
+         onUnmounted(() => {
+            window.removeEventListener("keydown", handleInput);
+         })
+
+         return {
+             input
+         }
+
+
+     }
+ })
+</script>

src/views/home/index.vue

@@ -1,17 +1,19 @@
 <template>
-    <UIindex />
-    <Microphone />
+    <!-- <UIindex />
+         <Microphone /> -->
+    <InputItem />
 
 </template>
 
 <script lang="ts">
- import { defineComponent, onMounted } from 'vue';
- import UIindex from "@/components/UI/index.vue";
- import Microphone from "@/components/microphone/index.vue";
+ import { defineComponent } from 'vue';
+ // import UIindex from "@/components/UI/index.vue";
+ // import Microphone from "@/components/microphone/index.vue";
+ import InputItem from "@/components/UI/UIDetails/inputItem.vue";
 
  export default defineComponent({
      name: "HomeIndex",
-     components: { UIindex, Microphone },
+     components: { InputItem },
  });
 
 </script>