WS-3 session 1a Task 3. Vitest covers each layout with: (1) it mounts without throwing, (2) it renders the expected DOM structure (top-bar/main/footer for PortalLayout, none for PublicLayout, slot-passthrough for OrganizerLayout), (3) it places <RouterView /> in the right region. Vuetify components (VApp/VAppBar/VMain/VFooter) are stubbed to their semantic HTML equivalents so the structural assertions still hold without pulling vuetify/components into the trimmed-down vitest config (which lacks the CSS plugin needed to transform Vuetify's .css side effects). OrganizerLayout uses vi.mock to short-circuit the DefaultLayoutWithVerticalNav import for the same reason. Vitest count: 41 -> 49 in apps/app.
Crewli — Organizer SPA
Main product UI for organisation and event staff (Vue 3 + Vuexy + Vuetify). Lives in this repo; only re-copy from Vuexy when upgrading the template.
Setup
- Install dependencies:
pnpm install
- Create
.env.local:
VITE_API_URL=http://localhost:8000/api/v1
VITE_APP_NAME="Crewli Organizer"
- Dev server uses port 5174 (see
vite.config.tsor run from repo root:make app).
pnpm dev --port 5174
Port
Runs on http://localhost:5174
Production: e.g. VITE_API_URL=https://api.crewli.app/api/v1 and host the SPA at https://crewli.app (see api/.env.example for FRONTEND_APP_URL and SANCTUM_STATEFUL_DOMAINS).