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:
@@ -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>
|
||||
Reference in New Issue
Block a user