Integrate Vuetify layout and routing

Add a Vuetify-powered application shell (Layout.vue) replacing the previous App.vue, including app bar, navigation drawer, theme toggle, footer and localStorage persistence for theme/drawer. Introduce a routesLayout plugin with a Visibility enum and centralized LayoutRoute definitions; add route components (Home, Impressum, Login, 404NotFound) and update the router to build routes from the new layout definitions. Register Vuetify in main.ts and add dependencies (vuetify, @fontsource/roboto, @mdi/font) in package.json; update tsconfig.app.json to include .ts files. Package-lock.json updated accordingly.
This commit is contained in:
Jonas
2026-04-15 20:56:47 +02:00
parent 58744e46b6
commit b9101a4582
14 changed files with 376 additions and 25 deletions
+30
View File
@@ -0,0 +1,30 @@
<script setup lang="ts"></script>
<template>
<v-container fluid class="fill-height d-flex flex-column justify-center align-center">
<h1 class="error-title text-h1 font-weight-bold">404</h1>
<p class="error-message text-h5">Seite nicht gefunden</p>
<router-link to="/" class="text-primary text-decoration-none font-weight-medium mt-5">
Zurueck zur Startseite
</router-link>
</v-container>
</template>
<style scoped>
.error-title {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;
letter-spacing: 2px;
}
.error-message {
font-size: 1.25rem;
opacity: 0.85;
}
a:hover {
text-decoration: underline !important;
}
</style>