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.
2026-04-15 20:56:47 +02:00
parent 58744e46b6
commit b9101a4582
14 changed files with 376 additions and 25 deletions
@@ -0,0 +1,72 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+import Home from '@/routes/Home.vue'
+import NotFound from '@/routes/404NotFound.vue'
+import Login from '@/routes/authentication/Login.vue'
+import Impressum from '@/routes/Impressum.vue'
+
+export enum Visibility {
+  Hidden,
+  Authenticated,
+  Unauthenticated,
+  Authorized,
+  Public,
+  Footer,
+}
+
+export interface LayoutRoute {
+  path: string
+  name: string
+  description: string
+  icon: string
+  disableFooter?: boolean
+  visible: Visibility
+  meta?: RouteRecordRaw
+}
+
+export const routes: LayoutRoute[] = [
+  {
+    path: '/',
+    name: 'Startseite',
+    description: 'Uebersicht der Anwendung',
+    icon: 'mdi-home',
+    visible: Visibility.Public,
+    meta: {
+      name: 'Home',
+      path: '/',
+      component: Home,
+    },
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    description: 'Logge dich ein',
+    icon: 'mdi-login',
+    visible: Visibility.Hidden,
+    meta: {
+      path: '/login',
+      name: 'Login',
+      component: Login,
+    },
+  },
+  {
+    path: '/impressum',
+    name: 'Impressum',
+    description: 'Impressum der Anwendung',
+    icon: 'mdi-file-document',
+    visible: Visibility.Footer,
+    meta: {
+      path: '/impressum',
+      name: 'Impressum',
+      component: Impressum,
+    },
+  },
+  {
+    path: '/notFound',
+    name: 'Nicht gefunden',
+    description: 'Diese Seite wurde nicht gefunden',
+    icon: 'mdi-information-outline',
+    visible: Visibility.Hidden,
+    meta: { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+  },
+]