79 lines
2.5 KiB
Markdown
79 lines
2.5 KiB
Markdown
# 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.
|
|
|
|
```plaintext
|
|
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:**
|
|
```typescript
|
|
export default defineNuxtConfig({
|
|
// ... other configs
|
|
css: ['~/assets/scss/main.scss'],
|
|
// ... other configs
|
|
})
|
|
```
|
|
|
|
**`app/assets/scss/main.scss` content:**
|
|
```scss
|
|
// 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';
|
|
```
|
|
|
|
---
|