Frontend UI Stack
1. Frontend UI Stack
Formerly titled “GUI - Bootstrap”. Refreshed against dev-next to reflect the current hybrid frontend.
1.1. Current stack
Technology | Role today |
|---|---|
Livewire 3 | Preferred approach for new interactive feature UI in modules |
Vue 3 | Existing admin chrome such as navigation/shell components |
Bootstrap 4 + jQuery | Legacy admin CRUD surfaces, alerts, DataTables styling |
Alpine.js | Small interactions and modal support |
Tailwind CSS 3 | Utility styling on newer layouts and Livewire views |
Laravel Mix 6 | Asset compilation for shared and module frontend code |
1.2. Contributor rules
Build Livewire-first for new interactive UI
Do not introduce a new Vue feature stack unless explicitly required
Reuse existing Blade/generic admin patterns for standard CRUD
Keep Alpine usage minimal and conventional
Expect Bootstrap and Tailwind to coexist on admin pages during the transition
1.3. Asset build
npm install
npm run dev
# or
npm run prod
Mix reads enabled modules from modules_statuses.json and expects environment input from /etc/nmsprime/env/global.env.
1.4. Where Livewire components live
modules/<Module>/Http/Livewire/modules/<Module>/Livewire/app/Livewire/for selected shared admin components
Register module components from the module service provider when required by the module’s conventions.
1.5. Legacy Bootstrap notes
Older pages under this section still document Bootstrap/Color Admin details and AJAX/form helpers. Treat them as transitional references. Prefer Livewire and current Blade patterns for new work.