overwatch/simulation/frontend

Vue Template

Opinionated Vue 3 starter based on Vitesse, extended with shadcn-vue components, Supabase auth, and UnoCSS Wind4.

Stack

• Vue 3 + TypeScript + Vite
• UnoCSS with presetWind4 (Tailwind v4-compatible utilities)
• shadcn-vue components powered by reka-ui
• Supabase for auth and data persistence (PKCE flow)
• Pinia stores
• vue-i18n with locale auto-detection
• ViteSSG static site generation
• dev-i18n-audit tool at /__dev__/i18n-audit (dev-only)

Setup

cp .env.example .env.local
# Fill in VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
pnpm install
pnpm dev

Environment Variables

Variable	Description
VITE_SUPABASE_URL	Your Supabase project URL
VITE_SUPABASE_ANON_KEY	Your Supabase anon/public key
VITE_ALLOWED_LOCALES	Comma-separated locale list (e.g. en,fr). Empty = all
VITE_BRAND_NAME	App name shown in sidebar and page titles

Adding shadcn-vue Components

The full shadcn-vue component set is already installed in src/components/ui/. You can add more via the CLI:

npx shadcn-vue@latest add <component-name>

All components use the @/ alias pointing to src/. The cn() utility lives in src/lib/utils.ts.

Auth

Auth is handled via Supabase PKCE. The useAuth() composable exposes loginWithEmail, loginWithProvider, and signUpWithEmail. Protected routes use meta: { requiresAuth: true } in their route definition.

The useAuthStore (Pinia) holds the current user and session state.

Layouts

Layout	Description
default	Bare router-view
with-sidebar	Sidebar + main content area
login	Centered card layout

i18n Audit (dev only)

Navigate to http://localhost:3333/__dev__/i18n-audit to scan your source files for i18n keys, audit locale YAML files, and optionally use LM Studio for AI-assisted translation.

Project Structure

src/
├── components/
│   ├── ui/          # shadcn-vue primitives
│   ├── AppSidebar.vue
│   ├── DarkModeSwitcher.vue
│   └── LanguageSwitcher.vue
├── composables/
│   ├── useAuth.ts
│   └── useLogout.ts
├── devtools/        # i18n-audit (dev only)
├── layouts/
│   ├── default.vue
│   ├── login.vue
│   └── with-sidebar.vue
├── lib/
│   ├── auth/        # auth helpers
│   ├── i18n-audit/  # audit lib
│   ├── supabaseClient.ts
│   └── utils.ts     # cn() utility
├── modules/         # auto-loaded Vite SSG modules
├── pages/
│   ├── index.vue
│   └── login.vue
├── stores/
│   ├── auth.ts
│   └── adminAccess.ts
└── types/
    └── database.ts  # Supabase DB types (replace with your own)