Frontend Development
The Identity Frontend is built with Vue 3, Vuetify, and TypeScript, providing a modern authentication UI.
Technology Stack
- Framework: Vue 3 (Composition API)
- UI Library: Vuetify 3
- Language: TypeScript
- Build Tool: Vite
- State Management: Pinia
- HTTP Client: Axios
Project Structure
src/
├── components/ # Reusable Vue components
│ ├── auth/ # Authentication forms
│ ├── admin/ # Admin panel components
│ └── common/ # Shared components
├── views/ # Page-level views
│ ├── auth/ # Login, Register, 2FA pages
│ ├── admin/ # Admin dashboard pages
│ └── profile/ # User profile pages
├── router/ # Vue Router configuration
├── stores/ # Pinia stores
├── services/ # API service modules
├── composables/ # Vue composables
└── types/ # TypeScript type definitions
Key Views
| View | Path | Description |
|---|---|---|
| Login | /login | Email/password login form |
| Register | /register | User registration |
| 2FA Verify | /2fa/verify | Two-factor authentication |
| Dashboard | /dashboard | User dashboard |
| Admin Users | /admin/users | User management (admin) |
| Admin Tenants | /admin/tenants | Tenant management (admin) |
Running Locally
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
Docker Build
The frontend uses a multi-stage Docker build:
- Builder stage:
node:20-alpine- installs deps and builds with Vite - Production stage:
nginx:alpine- serves the static build output
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
API Integration
The frontend communicates with the Identity Backend at:
- Production:
https://identity.vecton.hu/api - Development:
http://localhost:8000/api
All API calls use Axios with automatic token management via Pinia stores.