From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 19 Jun 2025 16:11:39 +0000 (+0000)
Subject: frontend: Install a router
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=381b3667516dd59b91426736968f5e001bd2714a;p=pbs.git

frontend: Install a router

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

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4084869f..5f41e9aa 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,8 @@
         "bulma": "^1.0.4",
         "sass-embedded": "^1.89.2",
         "vue": "^3.5.13",
-        "vue-i18n": "^11.1.6"
+        "vue-i18n": "^11.1.6",
+        "vue-router": "^4.5.1"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.1",
@@ -3318,6 +3319,20 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.2.10",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.10.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 43267e49..21f4afcf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,8 @@
     "bulma": "^1.0.4",
     "sass-embedded": "^1.89.2",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.1.6"
+    "vue-i18n": "^11.1.6",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d05208d6..929ecaa6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,47 +1,25 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+	import { RouterLink, RouterView } from "vue-router"
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+	<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+		<div class="container">
+			<div class="navbar-brand">
+				<RouterLink to="/" class="navbar-item">
+					<strong>
+						Pakfire Build Service<span class="has-text-primary">_</span>
+					</strong>
+				</RouterLink>
+			</div>
+
+			<div class="navbar-menu">
+				<div class="navbar-start">
+
+				</div>
+			</div>
+		</div>
+	</nav>
+
+	<RouterView />
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index fd436668..e461d68f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,8 +3,10 @@ import './assets/main.scss'
 import { createApp } from 'vue'
 import { createI18n } from "vue-i18n"
 import App from './App.vue'
+import router from './router'
 
 const app = createApp(App)
+app.use(router)
 
 // Setup translation
 app.use(
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
new file mode 100644
index 00000000..8cd51a1b
--- /dev/null
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: '/',
+			name: 'home',
+			component: HomeView,
+		},
+	],
+})
+
+export default router