Fehlermeldungen hinzugefügt, wenn Verbindung zur API nicht klappt

.env.development

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://192.168.188.38/Jonas/ritzenbergenapi

.env.production

@@ -0,0 +1 @@
+VITE_BACKEND_URL=https://api.ritzenbergen.de

.gitignore

@@ -1,25 +1,28 @@
-# Nuxt dev/build outputs
-.output
-.data
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Misc
-.DS_Store
-.fleet
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+package-lock.json
 
-# Local env files
-.env
-.env.*
-!.env.example
-app/bilder
+src-tauri/target
+src-tauri/gen

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "app/dto"]
-	path = app/dto
-	url = https://git.ritzenbergen.de/R40fendt/ritzenbergen-dto.git

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}

Dockerfile.dev

@@ -1,17 +0,0 @@
-FROM node:26-alpine
-
-WORKDIR /app
-
-# nur package-Dateien zuerst, damit Docker-Cache greift
-COPY package*.json ./
-
-RUN npm install
-
-# Rest des Codes
-COPY . .
-
-# Vite Dev-Server
-EXPOSE 1420
-
-CMD ["npm", "run", "dev", "--", "--host"]
-

README.md

@@ -1,75 +1,15 @@
-# Nuxt Minimal Starter
+# ritzenbergen
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+[https://ritzenbergen.de](https://ritzenbergen.de) - Neue, private Homepage für das kleine Dorf Ritzenbergen
 
-## Setup
 
-Make sure to install dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+Bei der Migration beachten:
+- neue galerie-kommentare Tabelle
+- addhit URL in der index.html anpassen
+- Event-Datenbank anpassen
+- Neue Formulartabelle
+- .env.production anpassen 
+- Salt ändern (secret.php in der API)
+- Event-Tabelle updaten (neue Formular-Spalte)
+- Admin-Tabellen hinzufügen
+- WEBKIT_DISABLE_COMPOSITING_MODE=1 zum Starten der Tauri-App unter Wayland

app/app.vue

@@ -1,3 +0,0 @@
-<template>
-    <NuxtPage/>
-</template>

app/assets/main.scss

@@ -1,9 +0,0 @@
-@use "~/assets/mobirise/css/additional.scss";
-@use "~/assets/dropdown/css/style.scss";
-
-html,
-body,
-#app {
-  width: 100vw;
-  margin: 0;
-}

app/components/EmblaItem.vue

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
-</script>
-<template>
-  <div
-    class="embla__slide slider-image item"
-    style="margin-left: 1rem; margin-right: 1rem"
-  >
-    <div class="slide-content">
-      <div class="item-img">
-        <div class="item-wrapper">
-          <NuxtLink :to="link">
-            <img
-              :src="
-                src
-              "
-            />
-            <span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
-              {{ jahr }}
-            </span>
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.item-wrapper {
-  position: relative;
-}
-  .jahr-overlay {
-    color: white;
-    mix-blend-mode: difference;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-  }
-</style>

app/pages/galerie.vue

@@ -1,131 +0,0 @@
-<script lang="ts" setup>
-import Navbar from "../components/Navbar.vue";
-import Embla from "../components/Embla.vue";
-import MyFooter from "../components/MyFooter.vue"; 
-
-const { $gql } = useNuxtApp();
-
-function mapperSrc(event:string, jahr:number){
-  return "http://localhost:3000/api/galerie/randomimage/"+event+"/"+jahr;
-}
-function mapperLink(event:string, jahr:number){
-  return "/bildvorschau/"+event+"/"+jahr;
-}
-
-const events = await $gql.request<{
-  erntefest: Array<{jahr:number}>,
-  osterfeuer: Array<{jahr:number}>,
-  fussball: Array<{jahr:number}>,
-  doppelkopf: Array<{jahr:number}>
-}>(`
-{
-  erntefest: bilder(event: "erntefest") {
-    jahr
-  }
-
-  osterfeuer: bilder(event: "osterfeuer") {
-    jahr
-  }
-
-  doppelkopf: bilder(event: "doppelkopf") {
-    jahr
-  }
-
-  fussball: bilder(event: "fussball") {
-    jahr
-  }
-}
-
-`);
-  
-const mappedEvents=[
-  {
-    "title":"Erntefest",
-    "src": events.erntefest.map((event)=>mapperSrc("erntefest",event.jahr)),
-    "links": events.erntefest.map((event)=>mapperLink("erntefest",event.jahr)),
-    "id":"erntefest",
-    "jahre": events.erntefest.map((event)=>event.jahr)
-  },
-  {
-    "title":"Osterfeuer",
-    "src": events.osterfeuer.map((event)=>mapperSrc("osterfeuer",event.jahr)),
-    "links": events.osterfeuer.map((event)=>mapperLink("osterfeuer",event.jahr)),
-    "id":"osterfeuer",
-    "jahre": events.osterfeuer.map((ev)=>ev.jahr),
-  },
-  {
-    "title":"Preisdoppelkopf",
-    "src": events.doppelkopf.map((event)=>mapperSrc("doppelkopf",event.jahr)),
-    "links": events.doppelkopf.map((event)=>mapperLink("doppelkopf",event.jahr)),
-    "id":"doppelkopf",
-    "jahre": events.doppelkopf.map((ev)=>ev.jahr),
-  },
-  {
-    "title":"Fußballturniere",
-    "src": events.fussball.map((event)=>mapperSrc("fussball",event.jahr)),
-    "links": events.fussball.map((event)=>mapperLink("fussball",event.jahr)),
-    "id":"fussball",
-    "jahre": events.fussball.map((ev)=>ev.jahr),
-  },
-]
-
-
-</script>
-<template>
-  <Navbar :links="[
-    { title: 'Erntefest', link: '/galerie/#erntefest' },
-    { title: 'Osterfeuer', link: '/galerie/#osterfeuer' },
-    { title: 'Doppelkopf', link: '/galerie/#doppelkopf' },
-    { title: 'Fußballturniere', link: '/galerie/#fussball' },
-  ]" />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-
-  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-md-12 col-lg-10">
-          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
-            <strong>Willkommen in der Galerie</strong>
-          </h3>
-          <p class="mbr-text mbr-fonts-style display-7">
-            In unserem Fotoalbum findest du chronisch geordnete Bilder
-            verschiedener Veranstaltungen aus den letzten Jahrzehnten. Einfach
-            auf ein Bild mit einer Jahreszahl raufklicken.
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <br /><br />
-  <section
-    class="slider4 mbr-embla cid-u6k7q0yLdW"
-    v-for="event in mappedEvents"
-    :id="event.id"
-  >
-    <div class="container-fluid">
-      <div class="row">
-        <h4
-          class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
-        >
-          <strong>{{ event.title }}</strong>
-        </h4>
-        <div class="col-12">
-          <br />
-          <!-- src: Link zum Randomimage, links: Link zur Bildschau -->
-          <Embla :src="event.src" :links="event.links" :jahre="event.jahre" />
-        </div>
-      </div>
-    </div>
-    <br /><br /><br />
-  </section>
-	<h1 v-if="mappedEvents.length==0">Keine Internetverbindung!</h1>
-    <br /><br /><br />
-  <MyFooter />
-</template>
-<style scoped></style>

app/pages/index.vue

@@ -1,69 +0,0 @@
-<script lang="ts" setup>
-import Navbar from "../components/Navbar.vue";
-import Embla from "../components/Embla.vue";
-import Umgebung from "../components/startseite/Umgebung.vue";
-import MyFooter from "../components/MyFooter.vue"; 
-import WillkommenText from "../components/startseite/WillkommenText.vue";
-import Bilderbuch from "../components/startseite/Bilderbuch.vue";
-import Forms from "../components/startseite/Forms.vue";
-import Events from "../components/startseite/Events.vue";
-import Willkommen from "../components/startseite/Willkommen.vue";
-import { ref } from "vue";
-
-
-const images=ref(["http://localhost:3000/api/galerie/randomimage/erntefest","http://localhost:3000/api/galerie/randomimage/osterfeuer","http://localhost:3000/api/galerie/randomimage/doppelkopf","http://localhost:3000/api/galerie/randomimage/fussball","http://localhost:3000/api/galerie/bild/andere/0/hauptfoto.jpg"]);
-</script>
-
-<template>
-  <!-- Startseite -->
-  <Navbar />
-  <Willkommen/>
-  
-  
-  <Events style="margin-top: 120px;"/>
-
-  <Forms/>
-      
-
-  <Bilderbuch/>
-
-
-
-	<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-12">
-
-          <Embla :src="images"
-          :font-size="49"
-
-          :links='[
-            "/galerie/#erntefest",
-            "/galerie/#osterfeuer",
-            "/galerie/#doppelkopf",
-            "/galerie/#fussball",
-            ""
-          ]'
-          :jahre="['Erntefest','Osterfeuer','Doppelkopf', 'Fußball','']"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-
-
-
-
-  <WillkommenText ref="willkommen"/>
-
-
-  <br>
-  <br>
-
-
-  <Umgebung ref="umgebung" id="umgebung" />
-  <MyFooter ref="footer" />
-
-</template>
-
-<style lang="css" scoped></style>

app/plugins/graphql.ts

@@ -1,16 +0,0 @@
-import { GraphQLClient } from "graphql-request";
-
-export default defineNuxtPlugin(() => {
-  const config=useRuntimeConfig();
-
-  const endpoint = import.meta.server
-  ? config.graphqlEndpoint
-  : config.public.graphqlEndpoint
-
-  const client = new GraphQLClient(endpoint);
-  return {
-    provide: {
-      gql: client
-    }
-  }
-});

app/plugins/my-fetch.ts

@@ -1,15 +0,0 @@
-export default defineNuxtPlugin(() => {
-  const config = useRuntimeConfig()
-
-  const myfetch = $fetch.create({
-    baseURL: import.meta.server ? config.apiBase : config.public.apiBase,
-    onRequest({ options }) {
-    },
-  })
-
-  return {
-    provide: {
-      myfetch: myfetch,
-    },
-  }
-})

app/ritzenbergenlib.ts

@@ -1,174 +0,0 @@
-import { GraphQLClient } from 'graphql-request';
-
-const graphqlClient = new GraphQLClient('http://localhost:3000/graphql', {
-  headers: {
-    // optional: Authorization: 'Bearer TOKEN'
-  },
-});
-
-const apiBaseUrl = import.meta.env.VITE_BACKEND_URL;
-
-class User {
-	public username: string;
-	public kuerzel: string;
-	public points: number;
-	public id: number;
-	constructor(username: string, kuerzel: string, points: number, id: number) {
-		this.username = username;
-		this.kuerzel = kuerzel;
-		this.points = points;
-		this.id = id;
-	}
-	async hatgetippt(): Promise<boolean> {
-		var hatgetippt = false;
-		// $.ajax(
-		// 	RitzenbergenLib.api("/bulitipp/hatgetippt.php?userid=" + this.id),
-		// 	{
-		// 		async: false,
-		// 		success(response): any {
-		// 			hatgetippt = response == 1;
-		// 			console.log(response);
-		// 		},
-		// 	}
-		// );
-		return hatgetippt;
-	}
-}
-
-class SpieltagSumme {
-	public user: User;
-	public tsPoints: number;
-	constructor(user: User, tsPoints: number) {
-		this.user = user;
-		this.tsPoints = tsPoints;
-	}
-}
-
-class RitzenbergenLib {
-	static get_img(mypath: string) {
-		if (mypath.startsWith("/"))
-			return "https://bilder.ritzenbergen.de" + mypath;
-		else return "https://bilder.ritzenbergen.de/" + mypath;
-	}
-	static api(path: string) {
-		if (path.startsWith("/"))
-			return apiBaseUrl + path;
-		else return apiBaseUrl+"/" + path;
-	}
-	static async checkInternetConnection(): Promise<boolean> {
-			try{
-					return await fetch(this.api("/addhit.php")).then((response)=>response.ok);
-			} catch(e){
-					return false;
-			}
-	}
-}
-
-class Paarung {
-	public heim: string;
-	public gast: string;
-	public id: number;
-	constructor(heim: string, gast: string, id: number) {
-		this.heim = heim;
-		this.gast = gast;
-		this.id = id;
-	}
-}
-
-class Ergebnis {
-	paarung: Paarung;
-	heim: number;
-	gast: number;
-	constructor(paarung: Paarung, heim: number, gast: number) {
-		this.paarung = paarung;
-		this.heim = heim;
-		this.gast = gast;
-	}
-}
-
-class Tipp {
-	heim: number | null;
-	gast: number | null;
-	paarung: Paarung | null;
-
-	constructor(
-		paarung: Paarung | null,
-		heim: number | null,
-		gast: number | null
-	) {
-		this.heim = heim;
-		this.gast = gast;
-		this.paarung = paarung;
-	}
-}
-
-class Spiel {
-	public paarung: Paarung;
-	public result: [number, number] | null;
-	public tipp: [number, number] | null;
-
-	constructor(
-		paarung: Paarung,
-		result: [number, number],
-		tipp: [number, number] | null
-	) {
-		this.paarung = paarung;
-		this.result = result;
-		this.tipp = tipp;
-	}
-	public calcPoints() {
-		if (this.tipp == null) return 0;
-		if (this.result[0] == this.tipp[0] && this.result[1] == this.tipp[1])
-			return 3;
-		let differenztipp = this.tipp[0] - this.tipp[1];
-		let differenz = this.result[0] - this.result[1];
-		if (differenztipp == differenz) return 2;
-		if (
-			(this.tipp[0] > this.tipp[1] && this.result[0] > this.result[1]) ||
-			(this.tipp[0] < this.tipp[1] && this.result[0] < this.result[1])
-		)
-			return 1;
-		return 0;
-	}
-	public static async fetchSpiele(spieltag: number, userid: number): Spiel[] {
-		let params = new URLSearchParams({
-			spieltag: spieltag + 1,
-			user: userid,
-		});
-		return fetch(
-			RitzenbergenLib.api("/bulitipp/spieltag-user.php?") +
-				params.toString()
-		)
-			.then((response) => {
-				return response.json();
-			})
-			.then((data) => {
-				return data.data;
-			})
-			.then((data) => {
-				return data.map((el) => {
-					return new Spiel(
-						new Paarung(
-							el.paarung.heim,
-							el.paarung.gast,
-							el.paarung.id
-						),
-						el.result,
-						el.tipp
-					);
-				});
-			});
-	}
-}
-
-
-export default {
-	RitzenbergenLib,
-	User,
-	SpieltagSumme,
-	Paarung,
-	Ergebnis,
-	Tipp,
-	Spiel,
-	graphqlClient
-};

eslint.config.js

@@ -0,0 +1,30 @@
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginVue from "eslint-plugin-vue";
+import globals from "globals";
+import typescriptEslint from "typescript-eslint";
+
+export default typescriptEslint.config(
+	{ ignores: ["*.d.ts", "**/coverage", "**/dist"] },
+	{
+		extends: [
+			eslint.configs.recommended,
+			...typescriptEslint.configs.recommended,
+			...eslintPluginVue.configs["flat/recommended"],
+		],
+		files: ["**/*.{ts,vue}"],
+		languageOptions: {
+			ecmaVersion: "latest",
+			sourceType: "module",
+			globals: globals.browser,
+			parserOptions: {
+				parser: typescriptEslint.parser,
+			},
+		},
+		rules: {
+			// your rules
+			"@typescript-eslint/no-explicit-any": "warn",
+		},
+	},
+	eslintConfigPrettier
+);

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="RitzenbergenOrtsschild.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Willkommen auf ritzenbergen.de</title>
+    
+
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style"
+      onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap">
+    </noscript>
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+		<script src="http://192.168.188.38/Jonas/ritzenbergenapi/addhit.php">
+		</script>
+
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

nuxt.config.ts

@@ -1,55 +0,0 @@
-import { GraphQLClient } from "graphql-request";
-
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
-  devtools: { enabled: true },
-  ssr: false,
-  modules: ["@formkit/nuxt"],
-  devServer: {
-    port: 1420
-  },
-  runtimeConfig: {
-    graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_INTERNAL || "http://localhost:3000/graphql",
-    apiBase: process.env.API_BASE_INTERNAL || "http://localhost:3000/api",
-    public: {
-      graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_PUBLIC || "http://backend:3000/graphql",
-      apiBase: process.env.API_BASE_PUBLIC || "http://backend:3000/api"
-    }
-  },
-
-  css: [
-    '~/assets/mobirise/css/additional.scss',
-    '~/assets/web/assets/mobirise-icons2/mobirise2.css',
-    '~/assets/parallax/jarallax.css',
-    '~/assets/bootstrap/css/bootstrap.min.css',
-    '~/assets/bootstrap/css/bootstrap-grid.min.css',
-    '~/assets/bootstrap/css/bootstrap-reboot.min.css',
-    '~/assets/dropdown/css/style.scss',
-    '~/assets/socicon/css/styles.css',
-    '~/assets/animatecss/animate.css',
-    '~/assets/theme/css/style.css',
-    '~/assets/css/index.css',
-    '~/assets/main.scss'
-  ],
-  app: {
-    head: {
-      link: [
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-        },
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap"
-        },
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
-        }
-      ]
-    }
-
-  }
-  
-})

package.json

@@ -1,40 +1,50 @@
 {
-  "name": "nuxt-test",
-  "type": "module",
+  "name": "ritzenbergen",
   "private": true,
+  "version": "0.1.0",
+  "type": "module",
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "tauri": "tauri",
+    "tauridev": "tauri dev",
+    "tauribuild": "tauri build"
   },
   "dependencies": {
-    "@formkit/nuxt": "^2.0.0",
-    "@formkit/themes": "^2.0.0",
-    "@formkit/vue": "^2.0.0",
-    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@formkit/themes": "^1.7.2",
+    "@formkit/vue": "^1.7.2",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
     "bcryptjs": "^3.0.3",
     "crypto-js": "^4.2.0",
     "embla-carousel-vue": "^8.6.0",
-    "graphql-request": "^7.4.0",
-    "jarallax": "^3.0.0",
-    "katex": "^0.17.0",
+    "jarallax": "^2.2.1",
+    "jquery": "^3.7.1",
+    "katex": "^0.16.27",
     "moment": "^2.30.1",
-    "nuxt": "^4.4.2",
     "process": "^0.11.10",
     "sloc": "^0.3.2",
     "striptags": "^3.2.0",
     "vscode-langservers-extracted": "^4.10.0",
-    "vue": "^3.5.32",
+    "vue": "^3.5.13",
+    "vue-async-computed": "^4.0.1",
     "vue-renderer-markdown": "^0.0.62",
-    "vue-router": "^5.0.4"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^2.10.1",
+    "@tauri-apps/cli": "^2",
+    "@types/jquery": "^3.5.32",
     "@types/markdown-it": "^14.1.2",
-    "sass-embedded": "^1.99.0"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^16.5.0",
+    "sass-embedded": "^1.86.3",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
   }
 }

public/robots.txt

@@ -1,2 +0,0 @@
-User-Agent: *
-Disallow:

src/App.vue

@@ -0,0 +1,39 @@
+<script lang="js">
+import { RouterView } from 'vue-router';
+import Kloenkasten from "./components/Kloenkasten.vue";
+
+export default {
+    components: {
+        RouterView,
+				Kloenkasten
+    }
+}
+</script>
+
+<template>
+  <!-- Haupt-Component -->
+  <RouterView :key="$route.fullPath" />
+	
+	<Kloenkasten />
+</template>
+
+<style lang="scss">
+
+@use "assets/mobirise/css/additional.scss";
+    @import "assets/web/assets/mobirise-icons2/mobirise2.css";
+    @import "assets/parallax/jarallax.css";
+    @import "assets/bootstrap/css/bootstrap.min.css";
+    @import "assets/bootstrap/css/bootstrap-grid.min.css";
+    @import "assets/bootstrap/css/bootstrap-reboot.min.css";
+    @import "assets/dropdown/css/style.scss";
+    @import "assets/socicon/css/styles.css";
+    @import "assets/animatecss/animate.css";
+    @import "assets/theme/css/style.css";
+    @import "./assets/css/index.css";
+
+    html, body, #app{
+        width: 100vw;
+        margin: 0;
+    }
+    
+</style>