VuiAdmin docs

Angular

The folder structure of the VuiAdmin Angular admin dashboard template, directory by directory.

The Angular edition's layout, and what each part is for.

index.html            the single page the build starts from
src/
  main.ts             bootstrap
  app.ts              picks a screen and decides whether it gets the shell
  router.ts           real paths, without @angular/router
  screens.ts          address to screen, for all nineteen
  screens/            one file per screen
  app-shell.ts        the sidebar, header and footer
  dashboard/          the dashboard's cards, charts and world map
  styles.css          Tailwind plus the design system's tokens
packages/
  vui-core/           framework-free half: tokens, class strings, fixtures, route list
  vui-angular/        the Angular components and directives, as source
  vui-css/            the shared stylesheets and the token file
public/
  CNAME               the custom domain, read by Pages on every deploy
.npmrc                legacy-peer-deps, with the reason written out
routes.test.ts        the route table against the shared route list, both directions

src/styles.css carries two @source lines, and they are not optional. Tailwind emits only the classes it can see, and the design system's class strings live in @viliha/vui-core where they reach the components through imports. Without the scans, every one of them is treated as unused and the app renders as unstyled HTML.

Where to start reading

The route table first, then one screen, then the shell. Those three tell you how the whole thing is put together, and everything else is a variation on the screen you already read.

On this page