DModal

DModal - A type-safe wrapper around Bootstrap Vue Next’s BModal component. Modal dialogs for lightboxes, user notifications, forms, or completely custom content.

Live Examples

Show Code

Slots

This component forwards all slots dynamically from the underlying Bootstrap Vue Next component.

Bootstrap Vue Next Wrapper

This is a lightweight type-safe wrapper around the corresponding Bootstrap Vue Next component. It provides API stability and forwards all props, events, and slots.

For complete API documentation (props, events, methods), refer to the Bootstrap Vue Next BModal documentation .

Additional actions

Use the actions slot for secondary actions such as View Sales or Print. They stack at full width with consistent spacing; the normal modal footer is unchanged. The slot receives the same scope as the default slot.

<DModal v-model="shown" title="Report" ok-only ok-title="Close">
  <ReportDetails />
  <template #actions>
    <DButton href="/sales">View sales</DButton>
    <DButton @click="printReport">Print report</DButton>
  </template>
</DModal>

When the actions belong to an embedded detail component, wrap them in the exported DXModalActions component. It supplies the same layout without per-button block props. Icon-only buttons retain their explicit square size.

DModal defaults to size="lg" (800px on desktop), giving embedded forms room for horizontal labels. Bootstrap keeps it within the mobile viewport. Pass an explicit size to override this, for example size="sm" for a short confirmation.