nuxt-x-app
Detail
Read-only detail panel for record pages with field-driven rendering and automatic type formatting.
Detail
The Detail category provides a structured read-only view for displaying record data on detail/show pages. It replaces manual composition of label/value pairs inside a card with a single field-driven component that handles all common data types automatically.
Components
<XADetailPanel />
A UCard-based panel that accepts a data object and a fields array to render labeled key-value pairs with automatic type formatting. Supports email/phone/URL links, badges with color maps, booleans, dates, currency, and copyable values. Falls back to a default slot for fully custom content. Shows a skeleton loader while loading is true.
<XADetailPanel
title="User Profile"
:data="user"
:loading="isLoading"
:columns="2"
:fields="[
{ key: 'email', label: 'Email', type: 'email' },
{ key: 'phone', label: 'Phone', type: 'phone' },
{ key: 'role', label: 'Role', type: 'badge', colorMap: { admin: 'error', user: 'neutral' } },
{ key: 'active', label: 'Active', type: 'boolean' },
{ key: 'createdAt', label: 'Joined', type: 'date', format: 'long' },
{ key: 'revenue', label: 'Revenue', type: 'currency' },
]"
>
<template #actions>
<UButton icon="i-lucide-pencil" size="sm" :to="`/users/${user.id}/edit`" />
</template>
</XADetailPanel>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | undefined | Card header title |
data | Object | undefined | Record data object — field values are read from this |
fields | DetailField[] | undefined | Field definitions for automatic rendering |
loading | Boolean | false | Show loading skeleton (4 rows) |
columns | 1 | 2 | 1 | Number of columns for the field grid |
DetailField shape:
| Key | Type | Description |
|---|---|---|
key | string | Key to look up in the data prop |
label | string | Human-readable label |
type | 'text' | 'email' | 'phone' | 'badge' | 'date' | 'currency' | 'boolean' | 'copy' | 'url' | Rendering type |
format | string | Date format: 'relative', 'long', 'short', 'datetime' |
colorMap | Record<string, string> | Maps field values to Nuxt UI color names (for badge type) |
Slots
| Slot | Description |
|---|---|
actions | Rendered in the card header, right-aligned — use for edit/action buttons |
default | Replaces field rendering entirely when no fields prop is provided |
footer | Card footer content |
AI Context
category: Detail
package: "@xenterprises/nuxt-x-app"
components:
- XADetailPanel
use-when: >
Displaying read-only record data on show/detail pages. Use instead of
manually composing UCard + label/value markup. Ideal for user profiles,
order summaries, contact records, and any entity detail view.
key-patterns:
- Pass a data object and fields array — the component handles all formatting
- Use type: 'badge' with colorMap for status fields
- Use columns: 2 for wider layouts with many fields
- Use the actions slot for edit/delete buttons in the card header
- Use the default slot when field-driven rendering is insufficient