Zwischenspeicher

assets/main.css

@@ -16,6 +16,10 @@
   .sidenav a {font-size: 18px;}
 }
 
+#title {
+  padding-bottom: 10px;
+}
+
 /* Header */
 .header {
   background-color: #a5aeb5;
@@ -94,19 +98,22 @@
   color: #f1f1f1;
 }
 
-/* Adress Content */
-.adress-content {
-  display: block;
+/* Address Table */
+.address-table {
+  border-collapse: collapse;
   width: 100%;
-  margin: 20px auto;
-  padding: 10px 45px;
-  background: white no-repeat 15px center;
-  background-size: 15px 15px;
-  font-size: 16px;
-  border: none;
-  border-radius: 5px;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
-    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.address-table th,
+.address-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.address-table th {
+  background-color: #f2f2f2;
+  color: #333;
 }
 
 
@@ -115,4 +122,3 @@
 
 
 
-

data/address-data.json

@@ -1,21 +0,0 @@
-[{
-  "id": "0000",
-  "name": "Holger Hedemann",
-  "address": "Hortensienweg 14"
-},
-{
-  "id": "1111",
-  "name": "Dieter Hillers",
-  "address": "Oldenburger Str. 28"
-},
-{
-  "id": "2222",
-  "name": "Hilko Hartmann",
-  "address": "Oldenburger Str. 28"
-},
-{
-  "id": "3333",
-  "name": "Katja Hedemann",
-  "address": "Rotenburger Weg 21a"
-}
-]

data/addressData.json

@@ -0,0 +1,36 @@
+{
+  "items":
+[
+  {
+  "id": 1,
+  "customernumber": "0000",
+  "name": "Dieter Hillers",
+  "company": "Hedemann GmbH",
+  "street": "Oldenburger Str. 28",
+  "postalcode": "26639",
+  "location": "Wiesmoor",
+  "phone": "04944-1450"
+  },
+  {
+  "id": 2,
+  "customernumber": "1111",
+  "name": "Holger Hedemann",
+  "company": "Hedemann GmbH",
+  "street": "Oldenburger Str. 28",
+  "postalcode": "26639",
+  "location": "Wiesmoor",
+  "phone": "04944-1450"
+  },
+  {
+  "id": 3,
+  "customernumber": "2222",
+  "name": "Hilko Hartmann",
+  "company": "Hedemann GmbH",
+  "street": "Oldenburger Str. 28",
+  "postalcode": "26639",
+  "location": "Wiesmoor",
+  "phone": "04944-1450"
+  }
+]
+}
+

nuxt.config.ts

@@ -3,6 +3,9 @@ export default defineNuxtConfig({
   modules: [
     '@huntersofbook/naive-ui-nuxt'
   ],
+  css: [
+    '@/assets/main.css'
+  ],
   build: {
     transpile: [
       'trpc-nuxt'

pages/address-management/address_index.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="main-content">
-    <h1>
+    <h1 id="title">
       Willkommen in der Adressverwaltung
     </h1>
-    <div class="adress-content">
-      <p>Text</p>
-    </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 
 </script>
-
-<style src="@/assets/main.css"></style>

pages/header/help.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="main-content">
-    <div class="heading">
-      <h1>
-        Hilfe
-      </h1>
-    </div>
+    <h1 id="title">
+      Hilfe
+    </h1>
     <div class="content">
       <p>Hier findest du Hilfe</p>
     </div>
   </div>
 </template>
-
-<style scoped src="@/assets/main.css"></style>

pages/header/info.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="main-content">
-    <div class="heading">
-      <h1>
-        Info
-      </h1>
-    </div>
+    <h1 id="title">
+      Info
+    </h1>
+
     <div class="content">
       <p>Hier findest du Infos</p>
     </div>
   </div>
 </template>
-
-<style scoped src="@/assets/main.css"></style>

pages/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="main-content">
-    <div class="heading">
-      <h1>Willkommen</h1>
-    </div>
+    <h1 id="title">
+      Willkommen
+    </h1>
   </div>
 </template>
-
-<style src="@/assets/main.css"></style>