Modal

Displays a modal that appears when clicking on an element.

Install

Run the following command to install the modal component:

npx acc-nuxt add Modal

Controller and Confirm

on confirm with async function

on confirm without async function

on close

disableConfirm

Do not close on confirm

The modal will not close on error by default

Behavior

Preserve content

Disable trigger

Controlled

No trigger

Custom styling

Header slot

Slots

The modal component provides the following slots for customization.

#trigger
The element that triggers the modal on click. This is typically a button. Optional if using v-model:open.
#header
The header content displayed above the main modal content.
#content
The main content displayed inside the modal body.
#footer="{ close, confirm, submitting, disableConfirm }"
Slot for customizing the modal footer. Receives close and confirm functions, along with submitting and disableConfirm states.

Props

closeOnConfirm:boolean— optional
default:true
Closes the modal after the onConfirm callback is finished.
awaitOnConfirm:boolean— optional
default:true
Waits for the onConfirm callback to resolve before closing the modal.
onConfirm:function— optional
default:undefined
Callback function to be called when the confirm button is clicked.
onClose:function— optional
default:undefined
Callback function to be called when the modal is closed.
disableConfirm:boolean— optional
default:false
Disables the confirm button.
preserveContent:boolean— optional
default:false
Preserves the modal content when closed.
disableTrigger:boolean— optional
default:false
Disables the trigger element.
modalClass:string— optional
default:undefined
Custom CSS class for the modal.
showFooter:boolean— optional
default:true
Controls whether the footer is displayed. Set to false to hide the footer.
confirmText:string— optional
default:Confirm
Text for the confirm button.
closeText:string— optional
default:Close
Text for the close button.

CSS Variables

The modal component can be customized using the following CSS variables.

--lev-modal-overlay-bg
default:rgba(0, 0, 0, 0.7)
Background color of the modal overlay.
--lev-modal-wrapper-align-items
default:center
Vertical alignment of the modal inside the wrapper.
--lev-modal-wrapper-padding
default:24px
Padding around the modal wrapper area.
--lev-modal-wrapper-z-index
default:1001
Z-index of the modal to control stacking order.
--lev-modal-content-padding
default:24px
Padding inside the modal content area.
--lev-modal-content-bg
default:#fff
Background color of the modal content.
--lev-modal-content-max-width
default:500px
Maximum width of the modal content.
--lev-modal-content-gap
default:16px
Gap between modal content sections.
--lev-modal-content-radius
default:8px
Border radius of the modal content.
--lev-modal-content-shadow
default:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
Box shadow of the modal content.
--lev-modal-content-bg-dark
default:#18181b
Background color of the modal content in dark theme.
--lev-modal-content-shadow-dark
default:0 10px 15px -3px rgba(0,0,0,0.7), 0 4px 6px -2px rgba(0,0,0,0.5)
Box shadow of the modal content in dark theme.

On This Page