add solution

vue-project/src/components/InputMask.vue

@@ -16,12 +16,13 @@
       </label>
       <button type="submit">Note Eintragen</button>
     </form>
-    <!-- @deleteEntry="deleteGrade"-->
+    <List/>
   </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
+import List from "@/components/List.vue";
 
 const grade_form_input = ref({
   kuerzel: "",

vue-project/src/components/List.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="list">
+    <span>Ich bin List.vue</span>
+    <table>
+      <thead>
+      <tr>
+        <th>Kürzel</th>
+        <th>Note</th>
+        <th>Credits</th>
+        <th></th>
+      </tr>
+      </thead>
+    </table>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="css">
+.list {
+  padding: 1em;
+  background-color: cadetblue;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #f4f4f4;
+}
+</style>