Suchfunktion Adresse, Hilfe und Info Links

pages/adresses/adresses_index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="main-container">
+    <div class="heading">
+      <h1>
+        Willkommen in der Adressverwaltung
+      </h1>
+    </div>
+    <div class="content">
+      <input v-model="input" type="text" placeholder="Suche...">
+      <div v-for="adresses in filteredList()" :key="adresses" class="adresses">
+        <p>{{ adresses }}</p>
+      </div>
+      <div v-if="input&&!filteredList().length" class="item error">
+        <p>Nicht gefunden</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const input = ref('')
+const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
+function filteredList () {
+  return adresses.filter(adresses =>
+    adresses.toLowerCase().includes(input.value.toLowerCase())
+  )
+}
+</script>
+
+<style scoped src="@/assets/main.css">
+</style>

pages/adresses/customer_mask.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="main-container">
+    <div class="heading">
+      <h1>
+        Kundenname
+      </h1>
+    </div>
+    <div class="content">
+      <p>Hier findest einen Kunden</p>
+    </div>
+  </div>
+</template>
+
+  <style scoped src="@/assets/main.css"></style>