Vue Modal Component API

Modal API

Explore the API reference for the Vue Modal component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CModal } from '@coreui/vue-pro'

Property	Default	Type
alignment	`'top'`	`string`
Align the modal in the center or top of the screen.
backdrop	`true`	`boolean`, `string`
Apply a backdrop on body while modal is open.
container5.3.0+	`'body'`	`HTMLElement`, `(() => HTMLElement)`, `string`
Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
contentClassName	-	`string`
A string of all className you want applied to the modal content component.
focus5.0.0+	`true`	`boolean`
Puts the focus on the modal when shown.
fullscreen	-	`boolean`, `string`
Set modal to covers the entire user viewport
keyboard	`true`	`boolean`
Closes the modal when escape key is pressed.
scrollable	-	`boolean`
Create a scrollable modal that allows scrolling the modal body.
size	-	`string`
Size the component small, large, or extra large.
teleport5.3.0+	`false`	`boolean`
Generates modal using Teleport.
transition	`true`	`boolean`
Remove animation to create modal that simply appear rather than fade in to view.
unmountOnClose	`true`	`boolean`
By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
visible	-	`boolean`
Toggle the visibility of alert component.

Event name
close
Callback fired when the component requests to be closed.
close-prevented
Callback fired when the component requests to be closed.
show
Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.

jsx

import { CModalHeader } from '@coreui/vue-pro'

Property	Default	Type
closeButton	`true`	`boolean`
Add a close button component to the header.

jsx

import { CModalTitle } from '@coreui/vue-pro'

Property	Default	Type
as	`'h5'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.