SYSTEM/docs/architecture/project-structure.md

3. Project Structure

Based on the Nuxt 4 documentation and the need to manage SCSS files effectively, the following directory structure will be adopted within the app/ directory.

app/
├── assets/
│   └── scss/
│       ├── base/
│       │   ├── _reset.scss       # Optional: for CSS resets
│       │   └── _typography.scss  # Base typography styles
│       ├── components/
│       │   └── _buttons.scss     # Example: Custom button styles
│       ├── layout/
│       │   └── _main.scss        # Main layout styles
│       ├── themes/
│       │   └── _aura-overrides.scss # Specific overrides for the Aura theme
│       ├── utils/
│       │   ├── _variables.scss   # Global SCSS variables (colors, spacing)
│       │   └── _mixins.scss      # Global SCSS mixins
│       └── main.scss             # Main entry file that imports all other SCSS partials
│
├── components/
│   ├── common/
│   │   └── AppHeader.vue         # Example of a globally used component
│   └── specific/
│       └── CellDetailView.vue    # Example of a view-specific component
│
├── composables/
│   ├── useCitizen.ts             # Composable for managing Citizen identity
│   └── useLedger.ts              # Composable for interacting with The Main Ledger
│
├── layouts/
│   └── default.vue               # The default layout for the application
│
├── pages/
│   ├── index.vue                 # Dashboard / Main View
│   └── cell/
│       └── [id].vue              # Cell Detail View (Dynamic Route)
│
├── plugins/
│   └── primevue.ts               # Plugin to register PrimeVue components/services if needed
│
└── app.vue                       # Main application entry point

To make this SCSS structure work seamlessly, we will update nuxt.config.ts to automatically import our main SCSS file globally.

nuxt.config.ts modification:

export default defineNuxtConfig({
  // ... other configs
  css: ['~/assets/scss/main.scss'],
  // ... other configs
})

app/assets/scss/main.scss content:

// 1. Utilities (Variables, Mixins)
@use 'utils/variables';
@use 'utils/mixins';

// 2. Base Styles
@use 'base/reset';
@use 'base/typography';

// 3. Layout Styles
@use 'layout/main';

// 4. Component Styles
@use 'components/buttons';

// 5. Theme Overrides
@use 'themes/aura-overrides';

---