# Vue Template

Opinionated Vue 3 starter based on [Vitesse](https://github.com/antfu-collective/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

```bash
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:

```bash
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

```text
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)
```