frontend: Add a demo page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3e49915cae707b92441e745b76f9a7958cd8f2ac..9c70e2fa5eea0424edae0b8d139295d0649fe21f 100644 (file)
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -16,6 +16,13 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue'),
+    },
+
+       // Add the demo page (this is being lazy-loaded)
+    {
+      path: "/demo",
+      name: "demo",
+      component: () => import("../views/DemoView.vue"),
     },
   ],
 })

diff --git a/frontend/src/views/DemoView.vue b/frontend/src/views/DemoView.vue
new file mode 100644 (file)
index 0000000..e1cde6b
--- /dev/null
+++ b/frontend/src/views/DemoView.vue
@@ -0,0 +1,13 @@
+<!--
+       This is a demo page that shows all possible elements for testing.
+-->
+
+<script setup lang="ts">
+       import Section from "../components/Section.vue"
+</script>
+
+<template>
+       <Section :title="$t('This Is A Section')">
+               <p>{{ $t("The section can have any content...") }}</p>
+       </Section>
+</template>