94 lines
3.1 KiB
Markdown
94 lines
3.1 KiB
Markdown
# 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)
|
|
```
|