Folder structure

Orbix is a standard Nuxt 4 + TypeScript project with its source in src/ (srcDir in nuxt.config.ts):

orbix-nuxt/
├── nuxt.config.ts                   CSS engine, base path, static generation of every page, TypeScript checks
├── packages/foundry-ui/             design system bundled with the template (local npm package, Vue components),
│                                    with its SCSS sources (see Customize with SCSS)
├── public/
│   ├── favicon.svg
│   └── images/                      demo photos (CC0 / public domain) and their CREDITS.json
├── server/plugins/orbix-document.ts document parts of every page: engine, boot scripts, icon sprite, preloader
├── scripts/                         static generation of the CSS engine, server build, icon sprite, preview server
├── src/
│   ├── app.vue                      root: the page in its layout, inside the client root
│   ├── error.vue                    error page: 404 (unknown URLs) and 500, in the blank layout
│   ├── pages/                       one file-based page per route (129), same folders as the URLs, each with definePageMeta
│   ├── layouts/                     app.vue (sidebar shell), auth.vue, blank.vue
│   ├── config/
│   │   ├── pages.ts                 one entry per page: path, page id, title key, layout (static generation, navigation)
│   │   ├── menu.ts                  sidebar menu (also feeds the command palette)
│   │   └── types.ts                 page, page meta and menu types
│   ├── components/
│   │   ├── shell/                   client root, sidebar, topbar, footer, page header, AppLink, brand, notifications, customizer, command palette
│   │   └── apps, auth, forms, ...   reusable blocks (ProductCard.vue, MailRow.vue, Password.vue, ...)
│   ├── composables/                 useI18n, usePageScript, useChart, useDataGrid, useCalendar, useCurrentPage, usePageDocument
│   ├── core/                        client start, i18n (vue-i18n), formats, charts, shell preferences, page scope, navigation
│   ├── plugins/i18n.ts              vue-i18n in the Nuxt app
│   ├── scripts/                     demo behavior per page family (charts, boards, filters, forms)
│   ├── data/                        demo data (people, events)
│   ├── locales/{en,es,pt,fr,ar}/    translations, one JSON file per area
│   ├── scss/brand.scss              brand settings of the design system (colors, radius, fonts)
│   ├── styles/engines/bootstrap.css    CSS engine entry
│   ├── styles/foundry/              design system compiled from SCSS by the build (generated)
│   ├── styles/index.css, orbix/     template styles (tokens only, logical properties)
│   ├── boot/orbix-boot.js           no-flicker boot script (added to every page by the server plugin)
│   └── svg/                         Orbix icons (the sprite is generated)
├── tests/                           Vitest: pages, hydration, navigation, languages, hard-coded text, sources, images, build
├── vitest.config.ts, tsconfig.json
└── package.json

node_modules/, .nuxt/, .output/, dist/, src/styles/foundry/, src/svg/sprite.svg, server/generated/ and public/icon-sets/ are created by npm install, the Nuxt commands, npm run build and npm run assets.

Orbix turns Nuxt's auto-imports off (imports.autoImport: false, components.dirs: [] in nuxt.config.ts): every file imports what it uses (import { definePageMeta, useHead } from '#imports', import PageHeader from '@/components/shell/PageHeader.vue'), so you can always see where a function or a component comes from. @/ is the src/ folder.

How a page is put together

The file src/pages/dashboards/crm.vue is the route /dashboards/crm (Nuxt file-based routing). Its definePageMeta({ id: 'dash-crm', title: 'dashboards.crm.title', layout: 'app' }) chooses the layout and gives the page id and title key; src/config/pages.ts lists the same page for the static generation.
Nuxt renders the page inside src/layouts/app.vue. The layout renders the shell (the sidebar comes from src/config/menu.ts), sets the translated document title and marks the current menu entry from the page id (useRoute().meta). Pages of the same layout share the layout instance: moving between them re-renders only the page.
On the server (nuxi generate or the Node.js server) the page is rendered to HTML in English. In the browser Vue hydrates that HTML, then the client root starts the app (src/core/app.ts): theme, saved language, foundry-ui behaviors.
The page component renders its content with translated texts (useI18n()), and usePageScript(init) runs its page script once the page is mounted and the app has started: src/scripts/dashboards/crm.ts draws the charts. Everything the script creates is released when you leave the page.