BOOST.UI

A modular ERP frontend framework built on Vue 3 and TypeScript. Uses a pnpm monorepo structure with a shell application that hosts 28+ independent business domain modules. Built with Vite.

Architecture

Shell (main container)
    ├── Header / Status Bar / Router
    ↓
Applications (28 modules, lazy-loaded)
    ├── dashboard
    ├── accounting
    ├── sales
    ├── inventory
    ├── projects
    ├── hrm
    └── ... (22 more)
    ↓
Packages (shared libraries)
    ├── @boost/ui         → Component library
    ├── @boost/repository → Data models & stores
    ├── @boost/shared     → Vue composables
    └── @boost/utils      → Business logic utilities

Micro-Frontend Pattern

• Each application module is independently built and lazy-loaded
• Dynamic routing computed at runtime from available apps
• Permission-based route access
• Plugin system for extensible initialization

Tech Stack

Layer	Technology
Framework	Vue 3
Language	TypeScript (strict mode)
Build	Vite
Package Manager	pnpm (workspaces)
State Management	Pinia
Routing	vue-router 4
i18n	vue-i18n 10
HTTP	Axios
Real-time	MQTT (Paho)
Charts	ECharts
Rich Text	Quill
Maps	Google Maps
Error Tracking	Sentry

Monorepo Structure

BOOST/
├── shell/                        # Main application container
│   ├── src/main.ts              # Entry point
│   ├── vite.config.dev.ts       # Dev build config
│   └── vite.config.ts           # Production config
├── packages/                     # Shared libraries
│   ├── ui/                      # @boost/ui component library
│   ├── repository/              # @boost/repository data models
│   ├── shared/                  # @boost/shared composables
│   ├── utils/                   # @boost/utils business logic
│   └── eslint-config-boost/     # Shared linting
├── applications/                 # Business domain modules
│   ├── accounting/
│   ├── agreements/
│   ├── assets/
│   ├── calendar/
│   ├── contact-center/
│   ├── dashboard/
│   ├── facility/
│   ├── finance/
│   ├── hrm/
│   ├── inventory/
│   ├── procurement/
│   ├── projects/
│   ├── sales/
│   ├── tasks/
│   └── ... (14 more)
├── lib/                          # Global CSS & prototypes
├── pnpm-workspace.yaml
├── tsconfig.base.json
└── package.json

Development

Prerequisites

• Node.js
• pnpm

Commands

# Run shell dev server
npm run shell

# Run shell on port 3000
npm run sh

# Build all packages
pnpm build

Auto-Imports

Development uses unplugin-auto-import and unplugin-vue-components for convenient access to Vue APIs and BOOST components without explicit imports.

@boost/ui Component Library

Input Components

• LqInput, LqTextInput, LqSearchInput
• LqDatepicker, LqHourInput
• LqInteger, LqMoney, LqEmail, LqPhone, LqNumberInput
• LqCheckbox, LqTextarea, LqColorPicker
• LqInputChips, LqCommonInput

Data Display

• LqDataList — List rendering
• Table components (layout, crossfilter, filtering)
• ECharts integration for visualization

Domain Components

• Accounting: Account select, journal transactions
• Sales: Order components
• Projects: Project selector, task management
• Contacts: Address card, party finder/edit
• Items, categories, currencies, files, agreements, comments

Layout & Navigation

• LqButton, LqActionButton, LqMultiButtons
• LqForm, LqDropdown
• LqRouterLink
• Header and layout components
• Toast notifications, dialog/modal system

@boost/repository

Data models and stores for ERP entities. Provides reactive data access patterns with:

• Model-query system for data fetching
• Crossfilter integration for client-side filtering
• Table configuration helpers
• MQTT subscriptions for real-time updates

@boost/shared

Vue composables for common functionality shared across applications.

@boost/utils

Business logic utilities used across the frontend.

Applications (Business Modules)

Module	Domain
accounting	General ledger, journal entries
agreements	Contracts and pricing
assets	Asset management
calendar	Scheduling
contact-center	Customer communication
dashboard	Overview and KPIs
facility	Warehouse/location management
finance	Financial operations
hrm	Human resources
inventory	Stock management
procurement	Purchase orders
projects	Project tracking
sales	Sales orders and invoices
tasks	Task management
+ 14 more	Various business domains

Key Configuration

tsconfig.base.json

• Strict mode enabled
• Path aliases: @boost/ui, @boost/repository, @boost/shared, @boost/utils
• ESNext target
• Composite project references for monorepo

Vite Dev Config

• Auto-import plugin for Vue APIs and composables
• Component resolver for @boost/ui
• Module aliasing for workspace packages
• ES module output format
• Vue devtools integration

Real-time Communication

The UI connects to MQTT brokers for real-time data updates, enabling live synchronization across connected clients (e.g., inventory changes, order status updates).