Emmie

Appearance

Vue File Naming Conventions ​

Unique Component Names ​

Vue component file names must be unique and descriptive within the app to make them easily identifiable.

Good Examples:
✅ ClientOverview.vue (not Overview.vue)
✅ ClientFinancingTab.vue (not FinancingTab.vue)
✅ DailyRegistrationForm.vue (not Form.vue)
✅ UserProfileCard.vue (not ProfileCard.vue)

Bad Examples:
❌ Overview.vue (too generic)
❌ Tab.vue (what kind of tab?)
❌ Form.vue (which form?)
❌ Card.vue (what card?)

Naming Pattern ​

Pattern: [Domain/Context][Purpose][Type].vue

  • Domain/Context: The main feature or domain (Client, User, DailyRegistration, etc.)
  • Purpose: What it does (Overview, Details, Edit, etc.)
  • Type: Component type (Page, Modal, Form, Card, etc.) - optional but helpful

Examples:

  • ClientOverviewPage.vue - Client overview page
  • ClientEditModal.vue - Modal to edit a client
  • DailyRegistrationCreateForm.vue - Form to create daily registration
  • UserProfileCard.vue - Card displaying user profile

Page Components (Mandatory Domain Prefix) ​

All page components in pages/ directories must be prefixed with their domain name. This is a strict convention.

Rules:

  • Convert domain folder name to PascalCase
  • Hyphenated domains: ambulatory-schedule → AmbulatorySchedule
  • For subdomains, use the subdomain name as prefix
  • No generic names like Overview.vue, Create.vue, Edit.vue
Domain Path✅ Correct❌ Incorrect
domains/client/pages/ClientOverview.vueOverview.vue
domains/mdo/pages/MdoOverview.vueOverview.vue
domains/settings/mentor-type/pages/MentorTypeCreate.vueCreate.vue
domains/schedule/ambulatory-schedule/pages/AmbulatoryScheduleOverview.vueOverview.vue
domains/client/tabs/evaluation/pages/EvaluationShow.vueShowEvaluation.vue

Generic Shared Components ​

Only shared components can have generic names if they're truly reusable:

✅ PrimaryButton.vue (in shared/components/buttons/)
✅ Badge.vue (in shared/components/badges/)
✅ Column.vue (in shared/layouts/columns/)