A production-ready Nuxt 3 starter for multi-tenant SaaS apps, extracted from a live production codebase. Includes auth, role-based access, email/SMS, super-admin panel, settings, and a dark sidebar layout — all wired up and working.
- Nuxt 3 (SPA mode,
ssr: false) - Supabase — auth, database, RLS
- Tailwind CSS v4 + PrimeVue (headless)
- Postmark — transactional email
- Twilio — SMS (optional)
- Sentry — error monitoring
- nuxt-security — security headers, CSP
| Area | What you get |
|---|---|
| Auth | Login, forgot password, invite flow, password reset, auth middleware, useAuthUser composable |
| Multi-tenancy | Organizations table, getAuthContext server utility, RLS-scoped queries |
| Role-based access | 4 roles (head_office, region_manager, cluster_manager, location_user), useOrganization composable |
| Super admin | Create orgs, invite admins, manage email defaults, manage Postmark/SMS per org |
| User management | Invite, edit, deactivate, resend invite |
| Settings | Email settings, scheduling, privacy, email templates (per org), email layout, security/login activity |
sendEmail server utility, Supabase auth hook for branded invite/reset emails, template system |
|
| SMS | sendSms server utility (Twilio), SMS template management |
| UI components | Sidebar layout, AppPage, BaseDataTable, DetailDrawer, ConfirmModal, FilterBar, ToastContainer, RichTextEditor, and more |
| Theming | Dark mode, primary color per org, theme presets, useTheme composable |
| Security | Rate limiting utility, CSP headers, HSTS, auth lock-out, login activity tracking |
| Code standards | CLAUDE.md with full coding conventions — auth patterns, error handling, TypeScript rules, review checklist |
Go to supabase.com and create a new project.
cp .env.example .envFill in your Supabase URL, anon key, and service role key.
npm run db:typesReplace YOUR_PROJECT_ID in package.json with your Supabase project ID first.
npm install
npm run devIn your Supabase dashboard: Auth → Hooks → Send Email → register your APP_URL/api/auth/send-email endpoint. Copy the hook secret into .env as SUPABASE_AUTH_HOOK_SECRET.
The starter expects a minimal schema. The database.types.ts file contains a stub — replace it with your actual generated types after running npm run db:types.
Core tables needed:
organizations— one row per tenantorganization_users— users scoped to an org with a role
See server/utils/getAuthContext.ts for the exact fields the auth utilities depend on.
- Add a page under
app/pages/ - Add it to the
navItemsarray inapp/layouts/default.vue - Add server routes under
server/api/following the patterns inCLAUDE.md
app/
assets/css/ # Tailwind + PrimeVue preset
components/
ui/ # Generic reusable components
users/ # User management components
settings/ # Settings components (theme, email, SMS)
super-admin/ # Super admin modals
composables/ # Shared state and logic
layouts/ # default.vue (sidebar), super-admin.vue
middleware/ # auth.ts, redirect-home, super-admin guard
pages/ # Routes
types/ # TypeScript types (index.ts, database.types.ts)
utils/ # formatters, themeHelpers, timezone
server/
api/
auth/ # Login tracking, password set, branded email hook
users/ # User CRUD
settings/ # Email, privacy, scheduling settings
super-admin/ # Org management, email defaults
templates/ # Email/SMS template API
utils/
getAuthContext.ts # Auth utilities (use these, not raw Supabase helpers)
rateLimit.ts # Per-endpoint rate limiting
sendEmail.ts # Postmark email sender
sendSms.ts # Twilio SMS sender
analyticsScope.ts # Multi-role data scoping
formatDate.ts # Date formatting
All coding conventions, patterns, auth rules, and the review checklist are documented in CLAUDE.md. If you use Claude Code, these are automatically loaded as project instructions.