Team Conventions

Team Conventions

Coding patterns enforced during team code reviews. Apply when writing/modifying Vue components, composables, or translations.

Nord Components

• Icon-only <nord-button> → add square prop; omit size on child <nord-icon> (inherits from button)
• Prefer CSS stack (<div class="n:flex n:flex-col n:gap-m">) over <nord-stack> component
• Prefer Tailwind classes (n:flex n:flex-col n:gap-l) over Nord layout web components

Templates

• Emit directly in template unless handler has logic beyond the emit call
• No wrapper methods that only call emit

<!-- ✓ -->
<nord-button @click="emit('delete')">Delete</nord-button>

<!-- ✗ -->
<nord-button @click="handleDelete">Delete</nord-button>
<!-- where handleDelete() only calls emit('delete') -->

Composables

• Params: MaybeRefOrGetter<T> + toValue() to unwrap
• TanStack Query keys: wrap in computed() when depending on reactive params
• API-only composables → composables/api/ResourceName.ts
• Domain logic composables → composables/useResourceName.ts

// ✓
function useCatalogItems(
  pagination: MaybeRefOrGetter<PaginationState>,
  enabled?: MaybeRefOrGetter<boolean>,
) {
  return useQuery({
    queryKey: computed(() => keys.list(toValue(pagination))),
    queryFn: () => fetch({ query: toValue(pagination) }),
    enabled: toValue(enabled),
  })
}

Reuse Before Creating

Check existing composables before writing new ones:

• useAuth() → user-scoped departments/department groups (don't query all)
• useFiltersStateSync() → filter state + debounce (don't write manual watchers)
• useConsultationItemDisplay() → item type display/translation

Translations

• Search locales/en-US/application.json for existing keys before adding new ones
• Common duplicates: "Items", "Name", "Account number", "Delete", "Edit", "Save"
• Use tCommon() for shared strings

Utilities

• Shared helpers used in 2+ components → extract to utils/ with unit tests
• Don't duplicate functions across Create/Edit modals

Imports

• Don't use #components alias — use actual relative paths instead
• Refactor existing #components imports to relative paths when encountered

TypeScript

• No unnecessary as casts when type already matches
• Trust inference

Render Functions

Keep TanStack Table cell renderers simple — single element preferred.

// ✓
cell: (props) => h('span', { style: { paddingLeft: `${level * 1.25}rem` } }, title)

// ✗ nested divs for simple indentation

Pre-Review Checklist

• Icon-only buttons: square prop, no size on child icons
• No emit-only wrapper methods
• Composable params: MaybeRefOrGetter + toValue()
• Query keys: computed() when reactive
• Shared helpers in utils/ with tests
• No duplicate translation keys
• Checked existing composables first
• API composables in composables/api/
• Tailwind over Nord layout components
• No unnecessary type casts