nuxt-x-marketing
Modal
Base modal wrapper built on Nuxt UI UModal with trigger slot, close button, content slot, and optional footer.
Modal
The base modal wrapper. Place your trigger in the default slot (a button or any element); the modal opens on click. Use the content slot for the modal body and the footer slot for a bottom bar. Exposes open and close events and a close function via the content slot.
Components
<XMarkModal />
The base modal. Place your trigger in the default slot (a button or any element); the modal opens on click. Use the content slot for the modal body and the footer slot for a bottom bar. Exposes open and close events and a close function via the content slot.
<XMarkModal
title="Custom Modal"
description="Subtitle shown in the footer bar"
size="2xl"
:dark="true"
>
<!-- Trigger -->
<UButton label="Open Modal" />
<!-- Content -->
<template #content="{ close }">
<div class="p-8">
<p>Your modal content here.</p>
<UButton @click="close">Close</UButton>
</div>
</template>
</XMarkModal>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | '' | Title shown in the modal footer bar |
description | String | '' | Description shown in the modal footer bar |
size | String | '4xl' | Modal width: 'sm' through '7xl', 'full' |
fullscreen | Boolean | false | Use fullscreen modal |
dark | Boolean | true | Dark mode for the modal chrome (affects close button) |
padding | String | 'p-0' | Body padding class |
Slots
| Slot | Description |
|---|---|
default | Trigger element |
content | Modal body — receives { close } |
footer | Override the footer bar |
Emits
| Event | Description |
|---|---|
open | Modal opened |
close | Modal closed |
AI Context
category: Modal
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkModal
use-when: >
Presenting any custom dialog without navigating away from the current page.
Use as the base for custom modal content; use XMarkModalVideo, XMarkModalImage,
XMarkModalChat, or XMarkModalFeature for specialized use cases.
typical-page-section: Anywhere a dialog or overlay is needed.