xirothedev · xirothedev · Sep 1, 2026 · Aug 31, 2026 · Aug 31, 2026 · Aug 31, 2026
@@ -6,5 +6,6 @@ This repo has four contexts, one per app. Each context has its own `CONTEXT.md`
 - **api-go** — Go port of the API. See `apps/api-go/CONTEXT.md`.
 - **api-axum** — Rust Axum port of the API. See `apps/api-axum/CONTEXT.md`.
 - **web** — frontend web app. See `apps/web/CONTEXT.md` (created lazily by `/domain-modeling`).
+- **web-vue** — Vue mirror of web. See `apps/web-vue/CONTEXT.md`.
 
 System-wide decisions live in `docs/adr/`.
@@ -0,0 +1,3 @@
+VITE_API_URL=http://localhost:4000/v1
+VITE_SITE_URL=http://localhost:3001
+VITE_CDN_URL=https://cdn.wds.xirothedev.site
@@ -0,0 +1,2 @@
+dist
+node_modules
@@ -0,0 +1,11 @@
+# CONTEXT — web-vue
+
+## Language
+
+**Mirror**:
+A separate app that reproduces another app's pages and behavior against the same API, kept running alongside the original. The original stays authoritative until parity is proven.
+_Avoid_: clone, fork, port
+
+**Mirror page**:
+One route in the mirror that answers to the same route in `web`, with the same visible structure and behavior. Visual parity may be approximate where no equivalent component library exists (calendar).
+_Avoid_: copy, twin
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Same font as apps/web layout.tsx: Inter({ subsets: ['latin'], weight: ['300','400','500','600'], variable: '--font-inter' }) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,57 @@
+{
+  "name": "web-vue",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "bun test --pass-with-no-tests",
+    "format": "bunx --bun --no-install prettier --write \"**/*.{js,ts,vue,json,css}\"",
+    "format:check": "bunx --bun --no-install prettier --check \"**/*.{js,ts,vue,json,css}\""
+  },
+  "dependencies": {
+    "@fullcalendar/core": "^6.1.21",
+    "@fullcalendar/daygrid": "^6.1.21",
+    "@fullcalendar/interaction": "^6.1.21",
+    "@fullcalendar/timegrid": "^6.1.21",
+    "@fullcalendar/vue3": "^6.1.21",
+    "@tanstack/vue-query": "^5.102.8",
+    "@tiptap/extension-code-block": "^3.30.6",
+    "@tiptap/extension-link": "^3.30.6",
+    "@tiptap/extension-placeholder": "^3.30.6",
+    "@tiptap/markdown": "^3.30.6",
+    "@tiptap/pm": "^3.30.6",
+    "@tiptap/starter-kit": "^3.30.6",
+    "@tiptap/vue-3": "^3.30.6",
+    "@unhead/vue": "^3.4.0",
+    "@vee-validate/zod": "^4.15.1",
+    "axios": "^1.20.0",
+    "chart.js": "^4.5.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "countup.js": "^2.10.1",
+    "lucide-vue-next": "^1.0.0",
+    "marked": "^18.0.11",
+    "motion-v": "^2.4.0",
+    "reka-ui": "^2.10.4",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "unhead": "^3.4.0",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.42",
+    "vue-chartjs": "^5.3.4",
+    "vue-router": "^5.3.0",
+    "zod": "^4.5.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.4.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.0",
+    "vite": "^8.2.2",
+    "vue-tsc": "^3.3.11"
+  }
+}
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import CsrfInitializer from '@/components/CsrfInitializer.vue';
+import Footer from '@/components/Footer.vue';
+import Navbar from '@/components/Navbar.vue';
+import FloatingCartButton from '@/components/shop/floating-cart-button.vue';
+import { provideAuth } from '@/composables/use-auth';
+import { useCartDrawer } from '@/composables/use-cart-drawer';
+import { defaultMetadata } from '@/lib/metadata';
+import { getOrganizationSchema, getWebSiteSchema } from '@/lib/structured-data';
+
+const route = useRoute();
+// chrome: 'none' routes (auth/admin) render their own chrome, like apps/web page-level layouts
+const bare = computed(() => route.meta.chrome === 'none');
+
+provideAuth();
+// cart drawer state is provided app-wide; the drawer UI itself lands with the shop ticket
+useCartDrawer();
+
+// Root layout head (apps/web layout.tsx metadata) + StructuredData.tsx JSON-LD scripts.
+// Pages override title/description via usePageMeta (child head wins over app head).
+useHead({
+  ...defaultMetadata,
+  htmlAttrs: { lang: 'vi' },
+  script: [
+    { type: 'application/ld+json', innerHTML: JSON.stringify(getOrganizationSchema()) },
+    { type: 'application/ld+json', innerHTML: JSON.stringify(getWebSiteSchema()) },
+  ],
+});
+</script>
+
+<template>
+  <CsrfInitializer />
+  <Navbar v-if="!bare" :variant="route.meta.navbarVariant ?? 'dark'" />
+  <main :class="bare ? '' : 'bg-background text-foreground min-h-screen pt-14 md:pt-16'">
+    <RouterView />
+  </main>
+  <FloatingCartButton />
+  <Footer v-if="!bare" />
+</template>