add vue-router and empty upload viewer delete views.

2026-09-28 14:55:21 +02:00
parent 0d1b9c0d40
commit a7dac01168
9 changed files with 79 additions and 7 deletions
@@ -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",
@@ -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",
@@ -1,6 +1,3 @@
 <template>
-    <main class="flex min-h-screen flex-col p-8">
-        <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>
+    <router-view />
 </template>
@@ -0,0 +1,5 @@
+export const ROUTE_NAMES = {
+    Upload: 'Upload',
+    Viewer: 'Viewer',
+    Delete: 'Delete'
+} as const;
@@ -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');
@@ -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;
@@ -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>
@@ -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>
@@ -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>