Frontend Architecture

Component Structure

src/
├── components/
│   ├── UI/              # Reusable UI components
│   ├── Layout/          # Layout components
│   └── Blocks/          # Block editor components
├── views/               # Page views (routes)
├── composables/         # Reusable reactive logic
└── router/             # Vue Router configuration

Composables Pattern

Reusable reactive functions:

• useAuth - Authentication
• useApi - API requests
• useToast - Notifications
• usePermissions - Permission checking

Routing Strategy

• Public routes - No authentication
• Staff routes - Require authentication
• Admin routes - Require admin role
• Lazy loading - Code splitting

State Management

• No external state library
• Composables for shared state
• Props for component communication
• Events for parent-child communication

Related Guides

• Frontend Development
• Backend Architecture