3.1 KiB
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)