frontend/package-lock.json

@@ -10,7 +10,8 @@
             "dependencies": {
                 "@tailwindcss/vite": "^4.3.3",
                 "tailwindcss": "^4.3.3",
-                "vue": "^3.5.32"
+                "vue": "^3.5.32",
+                "vue-router": "^4.6.4"
             },
             "devDependencies": {
                 "@types/node": "^22.10.7",
@@ -979,6 +980,12 @@
                 "@vue/shared": "3.5.43"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "license": "MIT"
+        },
         "node_modules/@vue/language-core": {
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.11.tgz",
@@ -1700,6 +1707,21 @@
                 }
             }
         },
+        "node_modules/vue-router": {
+            "version": "4.6.4",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+            "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
         "node_modules/vue-tsc": {
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.3.11.tgz",

frontend/package.json

@@ -11,7 +11,8 @@
     "dependencies": {
         "@tailwindcss/vite": "^4.3.3",
         "tailwindcss": "^4.3.3",
-        "vue": "^3.5.32"
+        "vue": "^3.5.32",
+        "vue-router": "^4.6.4"
     },
     "devDependencies": {
         "@types/node": "^22.10.7",

frontend/src/App.vue

@@ -1,6 +1,3 @@
 <template>
-    <main class="flex min-h-screen flex-col p-8">
+    <router-view />
-        <h1 class="text-2xl font-semibold tracking-tight">Private Image</h1>
-        <p class="mt-2 text-muted-foreground">Privacy-first image hosting — upload UI coming soon.</p>
-    </main>
 </template>

frontend/src/consts/routeNames.ts

@@ -0,0 +1,5 @@
+export const ROUTE_NAMES = {
+    Upload: 'Upload',
+    Viewer: 'Viewer',
+    Delete: 'Delete'
+} as const;

frontend/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import '@/assets/css/main.css';
 import App from './App.vue';
+import router from './router';
 
-createApp(App).mount('#app');
+createApp(App).use(router).mount('#app');

frontend/src/router/index.ts

@@ -0,0 +1,28 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { ROUTE_NAMES } from '@/consts/routeNames';
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: ROUTE_NAMES.Upload,
+            component: () => import('@/views/UploadView.vue'),
+            meta: { title: 'Private Image — Upload' }
+        },
+        {
+            path: '/v/:id',
+            name: ROUTE_NAMES.Viewer,
+            component: () => import('@/views/ViewerView.vue'),
+            meta: { title: 'Private Image — Viewer' }
+        },
+        {
+            path: '/d/:id',
+            name: ROUTE_NAMES.Delete,
+            component: () => import('@/views/DeleteView.vue'),
+            meta: { title: 'Private Image — Delete' }
+        }
+    ]
+});
+
+export default router;

frontend/src/views/DeleteView.vue

@@ -0,0 +1,6 @@
+<template>
+    <main class="flex min-h-screen flex-col p-8">
+        <h1 class="text-2xl font-semibold tracking-tight">Delete</h1>
+        <p class="mt-2 text-muted-foreground">Delete upload — coming soon.</p>
+    </main>
+</template>

frontend/src/views/UploadView.vue

@@ -0,0 +1,6 @@
+<template>
+    <main class="flex min-h-screen flex-col p-8">
+        <h1 class="text-2xl font-semibold tracking-tight">Upload</h1>
+        <p class="mt-2 text-muted-foreground">Upload UI coming soon.</p>
+    </main>
+</template>

frontend/src/views/ViewerView.vue

@@ -0,0 +1,6 @@
+<template>
+    <main class="flex min-h-screen flex-col p-8">
+        <h1 class="text-2xl font-semibold tracking-tight">Viewer</h1>
+        <p class="mt-2 text-muted-foreground">Zero-knowledge viewer — coming soon.</p>
+    </main>
+</template>