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 4084869f9438a05d0d3f33f085ae9f893f4d9913..5f41e9aabbd6357629634f856a2e86f83fc6efd2 100644 (file)
--- 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 43267e49bf639d494fc6b4c07265acf371e9844b..21f4afcfe2f9ca4fd643a41dc34aa932714b9469 100644 (file)
--- 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 d05208d6ae3d0f1f04e9540501aa7299d923ca4c..929ecaa6b296694a56f608f3f3336cb46ca614c4 100644 (file)
--- 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 fd436668b85aca8b1e408f288949ae2626af2246..e461d68f521d42242c3358f7babcae6f1035ff14 100644 (file)
--- 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 (file)
index 0000000..8cd51a1
--- /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