nuxt-x-app

Modal

Flexible modal dialogs including a general-purpose modal, a confirmation dialog, and a key-value data viewer.

The Modal category provides three composable dialog components built on top of Nuxt UI's UModal. XAModal is the general container; XAModalConfirm handles destructive action confirmations; XAModalKeyValue presents structured data in a readable format. All three support both v-model and internal open-state management, and expose open() / close() methods via defineExpose.

Components

`<XAModal />`

A flexible modal with a header (title + close button), a scrollable body, and an optional footer. An inline trigger button is rendered when triggerLabel or triggerIcon props are provided. The #trigger slot can replace the default button entirely.

<XAModal
  v-model="showModal"
  title="Edit Profile"
  size="lg"
  :closable="true"
>
  <p>Modal body content goes here.</p>

  <template #footer>
    <div class="flex justify-end gap-3">
      <UButton variant="ghost" @click="showModal = false">Cancel</UButton>
      <UButton @click="save">Save</UButton>
    </div>
  </template>
</XAModal>

<!-- Self-contained with trigger button -->
<XAModal title="Create Item" trigger-label="New Item" trigger-icon="i-lucide-plus">
  <CreateItemForm />
</XAModal>

Props

Prop	Type	Default	Description
`modelValue`	`Boolean`	`undefined`	`v-model` open state
`title`	`String`	`''`	Modal header title
`size`	`String`	`'md'`	Modal width: `xs` `sm` `md` `lg` `xl` `2xl` `3xl` `4xl` `5xl` `full`
`closable`	`Boolean`	`true`	Show the close (×) button in the header
`triggerLabel`	`String`	`''`	Text for the built-in trigger button
`triggerIcon`	`String`	`''`	Icon for the built-in trigger button
`triggerColor`	`String`	`'primary'`	Color of the trigger button
`triggerVariant`	`String`	`'solid'`	Variant of the trigger button
`triggerSize`	`String`	`'md'`	Size of the trigger button

Slots

Slot	Description
`trigger`	Replace the default trigger button
`header`	Replace the default header content
default	Modal body content
`footer`	Modal footer content

`<XAModalConfirm />`

A focused confirmation dialog. The icon and button color adapt to the variant prop (danger, warning, info). Supports loading state during async confirm actions.

<XAModalConfirm
  v-model:open="showConfirm"
  title="Delete User"
  message="This action cannot be undone. The user and all associated data will be permanently deleted."
  variant="danger"
  confirm-text="Delete"
  :loading="deleting"
  @confirm="deleteUser"
  @cancel="showConfirm = false"
/>

Props

Prop	Type	Default	Description
`modelValue`	`Boolean`	`undefined`	`v-model` open state
`open`	`Boolean`	`undefined`	`v-model:open` alternative
`title`	`String`	`'Confirm'`	Dialog title
`message`	`String`	`''`	Body message text
`variant`	`String`	`'info'`	Visual style: `danger` `warning` `info`
`color`	`String`	`''`	Alternative to `variant` using color names
`confirmText`	`String`	`'Confirm'`	Confirm button label
`cancelText`	`String`	`'Cancel'`	Cancel button label
`icon`	`String`	`''`	Override the auto-selected variant icon
`loading`	`Boolean`	`false`	Show loading state on the confirm button

Events

Event	Payload	Description
`confirm`	—	Emitted when the confirm button is clicked
`cancel`	—	Emitted when the cancel button is clicked

`<XAModalKeyValue />`

Displays a structured object or array of fields in a modal using XAFmtData. Useful for record detail views, audit logs, or quick-look inspections.

<XAModalKeyValue
  v-model="showDetails"
  title="Order Details"
  :data="{
    orderId: 'ORD-1234',
    status: 'Shipped',
    total: '$149.00',
    createdAt: '2025-03-01'
  }"
  size="lg"
  layout="horizontal"
/>

<!-- With array-form data for full control -->
<XAModalKeyValue
  title="User Details"
  trigger-label="View"
  :data="[
    { key: 'name', label: 'Full Name', value: user.name },
    { key: 'role', label: 'Role', value: user.role, type: 'badge' }
  ]"
/>

Props

Prop	Type	Default	Description
`modelValue`	`Boolean`	`undefined`	`v-model` open state
`title`	`String`	`''`	Modal title
`data`	`Object \| Array`	`{}`	Data to display — plain object or array of field descriptors
`size`	`String`	`'md'`	Modal width: `sm` `md` `lg` `xl`
`layout`	`String`	`'horizontal'`	Layout passed to `XAFmtData`
`spacing`	`String`	`'md'`	Spacing passed to `XAFmtData`
`triggerLabel`	`String`	`''`	Text for the built-in trigger button
`triggerIcon`	`String`	`''`	Icon for the built-in trigger button
`triggerColor`	`String`	`'primary'`	Color of the trigger button
`triggerVariant`	`String`	`'solid'`	Variant of the trigger button
`triggerSize`	`String`	`'md'`	Size of the trigger button

Slots

Slot	Description
`trigger`	Replace the default trigger button
`footer`	Optional footer content below the data

AI Context

category: Modal
package: "@xenterprises/nuxt-x-app"
use-when: >
  Use XAModal for any arbitrary dialog content. Use XAModalConfirm for
  destructive or irreversible actions (delete, revoke, deactivate) where
  user intent must be confirmed. Use XAModalKeyValue to surface read-only
  structured data (record details, audit entries) in a quick-look overlay
  without building a custom layout.

Edit this pageorReport an issue

Layout

Full-application shell with responsive sidebar, header, breadcrumbs, and navigation components.

Avatar

Avatar components for user profile display with group and upload variants.