Folder Structure

How the Haze Dashboard project is organized and where to find things.

Project Tree

The project follows the Nuxt 4 directory structure with the application code inside the app/ directory. Server-side logic and mock data live in server/, and i18n locale files are in a top-level i18n/ directory.

text

haze-dashboard-nuxt/
├── app/
│   ├── assets/
│   │   └── css/
│   │       └── main.css           # Design tokens, card styles, transitions
│   ├── components/
│   │   ├── dashboard/             # Sidebar, header, stats cards, charts
│   │   ├── docs/                  # CodeBlock (shiki syntax highlighting)
│   │   ├── landing/               # Marketing page sections
│   │   ├── shared/                # GlassCard, PageHeader, DataTable, etc.
│   │   └── shop/                  # E-commerce storefront components
│   ├── composables/
│   │   └── useThemeSettings.ts    # Accent color, density, RTL
│   ├── layouts/
│   │   ├── default.vue            # Sidebar + header (dashboard)
│   │   ├── horizontal.vue         # Top navigation bar
│   │   ├── auth.vue               # Centered card
│   │   ├── auth-split.vue         # Branding panel + form
│   │   ├── auth-cover.vue         # Gradient + glass card
│   │   ├── marketing.vue          # Public navbar + footer
│   │   └── blank.vue              # No chrome (errors)
│   ├── pages/
│   │   ├── dashboard/             # 5 dashboard variants
│   │   ├── apps/                  # Chat, mail, kanban, calendar, etc.
│   │   ├── auth/                  # Login, register (3 styles)
│   │   ├── docs/                  # Documentation (you are here)
│   │   ├── errors/                # 403, 404, 500
│   │   ├── orders/                # CRUD: list, detail, create, edit
│   │   ├── products/              # CRUD: list, detail, create, edit
│   │   ├── customers/             # CRUD: list, detail, create, edit
│   │   ├── invoices/              # CRUD: list, detail, create, edit
│   │   ├── users/                 # CRUD: list, detail, create, edit
│   │   ├── roles/                 # CRUD: list, create, edit
│   │   ├── settings/              # Profile, password, appearance, 2FA
│   │   └── profile/               # Profile, activity, connections, gallery
│   ├── stores/
│   │   ├── auth.ts                # Mock authentication + permissions
│   │   ├── sidebar.ts             # Sidebar open/collapsed state
│   │   └── notifications.ts       # Notification list + unread count
│   ├── utils/
│   │   ├── navigation.ts          # Sidebar navigation structure
│   │   └── permissions.ts         # Roles, permissions, demo users
│   └── app.config.ts              # Nuxt UI component overrides
├── i18n/
│   ├── en.json                    # English (~100 keys)
│   ├── de.json                    # German
│   └── fr.json                    # French
├── server/
│   ├── api/                       # 33 API route handlers
│   ├── data/                      # 17 JSON mock datasets
│   └── utils/
│       └── pagination.ts          # Shared pagination, search, filter, sort
├── public/                        # Static assets (images, favicon)
├── nuxt.config.ts                 # Nuxt configuration
├── package.json                   # Dependencies and scripts
└── tsconfig.json                  # TypeScript configuration

app/pages/ — File-Based Routing

Every .vue file in this directory automatically becomes a route. No manual router configuration is needed. Subdirectories map to URL segments: pages/dashboard/analytics.vue becomes /dashboard/analytics. Dynamic segments use square brackets: pages/orders/[id].vue matches /orders/123.

text

pages/
├── dashboard/
│   ├── index.vue                  # /dashboard (overview)
│   ├── analytics.vue              # /dashboard/analytics
│   ├── ecommerce.vue              # /dashboard/ecommerce
│   ├── crm.vue                    # /dashboard/crm
│   └── saas.vue                   # /dashboard/saas
├── orders/
│   ├── index.vue                  # /orders (list)
│   ├── [id].vue                   # /orders/123 (detail)
│   ├── create.vue                 # /orders/create
│   └── [id]/edit.vue              # /orders/123/edit
├── auth/
│   ├── login.vue                  # Classic login
│   ├── login-split.vue            # Split-screen login
│   └── login-cover.vue            # Cover login
├── docs/                          # Documentation pages
├── settings/                      # Settings pages
└── ...                            # And more

app/components/ — Auto-Imported Components

Components are auto-imported by Nuxt based on their directory path. The directory name becomes a prefix: components/shared/GlassCard.vue is used as <SharedGlassCard>. No import statements are needed.

Directory	Contents
dashboard/	AppSidebar, AppHeader, StatsCard, ChartCard, ActivityFeed, and other dashboard-specific components
shared/	GlassCard, PageHeader, DataTable, StatusBadge, EmptyState, ConfirmDialog, ProfileHeader
docs/	CodeBlock (shiki-powered syntax highlighting with copy button)
landing/	Marketing page sections: Hero, Features, Stats, CTA
shop/	E-commerce storefront components: ProductCard, CartItem, CheckoutSteps

app/layouts/ — Layout Wrappers

Haze Dashboard includes 7 layouts that wrap page content. The default layout provides the sidebar and header. Pages select their layout via definePageMeta({ layout: 'name' }).

Layout	Description
default	Sidebar navigation + header. Used by all dashboard, management, and settings pages.
horizontal	Top navigation bar instead of sidebar. Same header and content area.
auth	Centered card on a clean background. For classic login/register pages.
auth-split	Two-panel layout: dark branding panel on the left, white form on the right.
auth-cover	Full-screen gradient background with a glass card overlay.
marketing	Public-facing layout with a marketing navbar and footer. Used by the landing, about, contact, FAQ, and blog pages.
blank	No chrome at all. Used for error pages (404, 403, 500), coming soon, and maintenance.

app/stores/ — Pinia Stores

State management uses Pinia with the Composition API pattern. Stores are auto-imported via @pinia/nuxt.

Store	Purpose
auth.ts	Mock authentication with 3 demo users, role-based permissions, login/logout
sidebar.ts	Sidebar open/collapsed state management
notifications.ts	Notification list with unread count and mark-as-read

app/composables/ and app/utils/

Both directories are auto-imported by Nuxt. Composables provide reactive logic (hooks), while utils provide pure functions.

File	Purpose
composables/useThemeSettings.ts	Accent color, density, and RTL settings persisted to localStorage
utils/navigation.ts	Sidebar navigation structure (groups, items, icons, routes)
utils/permissions.ts	Role-permission mapping and demo user definitions

server/ — Mock API & Data

The server directory contains Nitro API routes that serve mock data. These routes support pagination, search, filtering, and sorting out of the box.

Directory	Contents
server/api/	API route handlers (orders, products, customers, invoices, users, roles, dashboard variants)
server/data/	17 JSON datasets (orders, products, customers, invoices, etc.)
server/utils/	Shared pagination utility with search, filter, and sort support

i18n/ — Locale Files

Three locale files ship by default: en.json, de.json, and fr.json. Each contains approximately 100 translation keys organized by feature area. The directory is referenced from nuxt.config.ts via the langDir option.

Key Configuration Files

File	Purpose
nuxt.config.ts	Modules (Nuxt UI, i18n, VueUse, Pinia), CSS imports, i18n locale config, page transitions
app/app.config.ts	Nuxt UI component overrides: color palette, card styles, button defaults, modal appearance
tsconfig.json	TypeScript configuration (extends Nuxt's generated tsconfig)
package.json	Dependencies, scripts (dev, build, generate, preview)

Tip

Nuxt auto-imports components, composables, and utils — you never need to write import statements for files in those directories. Just use them directly in your templates and scripts.

Next Steps

Learn how to create new pages and add them to the sidebar in the Adding Pages guide.