Ddd Architecture

DDD Component Architecture

Domain-driven folder structure and conventions for Vue/Nuxt component organisation. Apply when creating, moving, or renaming components and translation keys.

Structure

Path: components/[Domain]/[Feature]/[Function]/ File: [Name].vue (short names, Nuxt auto-generates full path prefix)

Kebab folders — Nuxt handles PascalCase resolution.

Hierarchy

1. Domain - business vertical (patient-care, records, inventory, catalog, calendar, reporting, settings)
2. Feature - logical module (plans, laboratory)
3. Function - UI pattern (form, list, card, chart, dialog, menu)
4. Component - the Vue file

Function Types

Examples

Rules

• Simple forms can be contained directly within dialog components
• Extract forms to form/ only when reused across multiple dialogs or contexts
• Generic components (StatusBadge) — base/ or ui/
• Domain-specific shared components stay in primary domain, imported elsewhere
• No barrel files (index.ts) in domain folders — direct imports only

Creating Components

Before creating, verify:

1. Path provides context — folder structure determines the full component name
2. Short descriptive filename — Active.vue, Result.vue, Adjust.vue
3. No generic names — never Main.vue, Default.vue, Component.vue
4. Correct function folder — form logic in form/, not dialog/
5. Single responsibility — one component = one purpose
6. Import direction — lower domains can import from higher, not reverse

Translations

Translation keys follow the same structure as file paths. Use dots instead of hyphens.

Path: pages.[domain].[feature].[function].*

Folder path to translation path:

• components/inventory/stock-locations/ — pages.inventory.stock.locations
• components/patient-care/plans/ — pages.patientCare.plans

Structure:

{
  "pages": {
    "inventory": {
      "stock": {
        "locations": {
          "list": {
            "header": "Stock Locations",
            "createButton": "Add Location",
            "filters": { "searchPlaceholder": "Search locations..." }
          },
          "form": {
            "createTitle": "Create Stock Location",
            "editTitle": "Edit Stock Location",
            "nameLabel": "Name",
            "cancel": "Cancel",
            "validation": { "nameRequired": "Name is required" }
          },
          "toast": {
            "create": {
              "success": "Stock location created",
              "error": "Failed to create"
            },
            "edit": {
              "success": "Stock location updated",
              "error": "Failed to update"
            },
            "delete": {
              "success": "Stock location deleted",
              "error": "Failed to delete"
            }
          }
        }
      }
    }
  }
}

Usage in components:

// Single translation variable scoped to feature
const t = useTranslation('pages.inventory.stock.locations')

// Access nested keys via dot notation
t('list.header') // "Stock Locations"
t('list.createButton') // "Add Location"
t('form.nameLabel') // "Name"
t('form.validation.nameRequired') // "Name is required"
t('toast.create.success') // "Stock location created"
t('toast.edit.error') // "Failed to update"

Function categories match component folders:

Edge Cases

Common Translations Reference

Use const tCommon = useTranslation('common') for reusable strings:

Example usage:

const tCommon = useTranslation('common')
tCommon('generalActions.save') // "Save"
tCommon('generalActions.cancel') // "Cancel"
tCommon('boolean.yes') // "Yes"
tCommon('dataTable.columns.name') // "Name"