App Header

Step 1 — Extend the design system layer

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@wlth/design-system']
})

Step 2 — Configure the product variant

// app/app.config.ts
export default defineAppConfig({
  wlth: {
    product: 'pay',
    navItems: [
      { label: 'Home',     isHome: true,                 to: '/' },
      { label: 'Payments', icon: 'i-lucide-credit-card', to: '/payments' },
      { label: 'Payees',   icon: 'i-lucide-users',       to: '/payees' },
      { label: 'Cards',    icon: 'i-lucide-wallet',      to: '/cards' }
    ]
  }
})

Step 3 — Place the component

// layouts/default.vue
<template>
  <div class="flex flex-col min-h-screen">
    <AppHeader />
    <main class="flex-1">
      <slot />
    </main>
  </div>
</template>

Available product IDs

ProductNavItem fields

interface ProductNavItem {
  label: string            // Display text
  icon?: string            // Lucide icon (e.g. 'i-lucide-credit-card')
  isHome?: boolean         // Renders as icon-only house button
  isCrossProduct?: boolean // Opens cross-product switch in a new tab
  hasDropdown?: boolean    // Shows a chevron indicator
  to?: string              // NuxtLink route — in-app navigation
  href?: string            // Anchor href — cross-app / external navigation
}

Components

Composables

Keyboard shortcuts

Registered automatically when useDashboard() is first called. These are global shortcuts — they fire on any page.

The routes above are defaults. Override them in a consuming app by calling defineShortcuts() after useDashboard() is initialised.

Wiring to Nuxt route changes

The recommended approach is a Nuxt plugin that calls show() on each route change. Create this file in your consuming app:

// plugins/page-loader.client.ts
export default defineNuxtPlugin(() => {
  const { show } = usePageLoader()
  const router = useRouter()

  router.beforeEach(() => {
    show(600) // show for 600ms — tune to match your typical page load time
  })
})

The loader also works well for async data fetching — call show() before an await and it disappears on its own without needing a finish() call.

Replace notifications

Assign your API response directly to notifications.value. The header will reactively update.

// plugins/header-data.client.ts
export default defineNuxtPlugin(async () => {
  const { notifications } = useHeader()

  // Replace with your API call
  const data = await $fetch('/api/notifications')
  notifications.value = data.map(n => ({
    id: n.id,
    product: n.product,        // must be a valid ProductId
    entityId: n.entityId,
    title: n.title,
    body: n.body,              // optional
    timestamp: n.createdAt,   // ISO string
    read: n.isRead,
  }))
})

Replace entities and user

MOCK_ENTITIES and MOCK_USER are exported constants from useHeader.ts. Because the entity list and user profile are currently hardcoded in the composable, swapping them requires either overriding those exports or — the cleaner approach — contributing a setEntities() and setUser() method to the composable. This is a known gap and the recommended next step for apps that need dynamic entity lists.

HubNotification shape

interface HubNotification {
  id: string
  product: ProductId          // 'broker' | 'pay' | 'shareholder' | 'dashboard' | 'customer'
  entityId: string            // must match an entity id
  title: string
  body?: string               // optional subtitle
  timestamp: string           // ISO 8601 date string
  read: boolean
}