Nuxt Modal
Our Nuxt modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a Nuxt modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the <body>
so that modal content scrolls instead. Use Nuxt’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.
Global usage
For local usage
Example
Variations
Modal props
PROP NAME | TYPE | DEFAULT | DESCRIPTION | |
---|---|---|---|---|
show | Boolean | N/A | ||
showClose | Boolean | true | ||
centered | Boolean | N/A | ||
appendToBody | Boolean | true | Whether modal should be appended to document body | |
scrollToBottom | Boolean | true | Whether modal should scroll to it’s bottom automatically | |
type | String | N/A | Modal type (notice/mini/””) | |
modalClasses | Object | String | N/A | Modal dialog css classes |
modalContentClasses | Object | String | N/A | Modal dialog content css classes |
gradient | String | N/A | Modal gradient type (danger, primary etc) | |
headerClasses | Object | String | N/A | Modal Header css classes |
bodyClasses | Object | String | N/A | Modal Body css classes |
footerClasses | Object | String | N/A | Modal Footer css classes |
animationDuration | Number | 500 | Modal transition duration |
Modal slots
PROP NAME | TYPE | DEFAULT | DESCRIPTION | |
---|---|---|---|---|
show | Boolean | N/A | ||
showClose | Boolean | true | ||
centered | Boolean | N/A | ||
appendToBody | Boolean | true | Whether modal should be appended to document body | |
scrollToBottom | Boolean | true | Whether modal should scroll to it’s bottom automatically | |
type | String | N/A | Modal type (notice/mini/””) | |
modalClasses | Object | String | N/A | Modal dialog css classes |
modalContentClasses | Object | String | N/A | Modal dialog content css classes |
gradient | String | N/A | Modal gradient type (danger, primary etc) | |
headerClasses | Object | String | N/A | Modal Header css classes |
bodyClasses | Object | String | N/A | Modal Body css classes |
footerClasses | Object | String | N/A | Modal Footer css classes |
animationDuration | Number | 500 | Modal transition duration |