We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

Confirm
#

A simple modal with message and ok and cancel buttons. Returns promise with true if ok clicked and false if cancel is clicked.

export default {
  methods: {
    onButtonClick() {
      this.$vaModal.confirm('Are you sure you want to see standard alert?')
        .then((ok) => ok && alert('This is standard browser alert'))
    },
  },
}
Open in GitHub

Props
#

Any prop from VaModal can be passed to confirm. Event listeners can be passed with on prefix. For example, onClickOutside.

Open in GitHub
NameDescriptionTypesDefault
allowBodyScroll

Allows the document scroll while modal is open.

Boolean

false

anchorClass

Set class name to the anchor slot container

String

-

ariaCloseLabel

The aria-label of the close button

String

"$t:close"

attachElement

A valid selector of element, where modal will be rendered

String

"body"

backgroundColor

The background color of the modal dialog

String

"background-secondary"

beforeCancel

Function

-

beforeClose

Function run before closing the modal

Function

-

beforeOk

Function

-

blur

Use blur filter to overlay. Root css variable --va-modal-overlay-background-blur-radius sets the blur radius

Boolean

false

cancelText

Text string to place in the default footer Cancel button

String

"$t:cancel"

child:cancelButton

Object

-

child:closeButton

Object

-

child:okButton

Object

-

closeButton

Boolean

false

disableAttachment

Ignore attach-element prop and render component as it's parent child

Boolean

false

fixedLayout

Use fixed-layout: true to scroll only content in modal. Title and actions will be fixed

Boolean

false

fullscreen

Add the fullscreen prop to cover the whole page

Boolean

false

hideDefaultActions

Use hide-default-actions: true to hide Cancel and Ok buttons

Boolean

false

maxHeight

Use max-height to change the maximum height of the modal. If content is larger, scroll will appear

String

""

maxWidth

Use max-width to change the maximum width of the modal.

String

""

message

Content of modal body

String

""

mobileFullscreen

Use mobile-fullscreen: false to disable fullscreen mode for mobile viewports

Boolean

true

noDismiss

Disable both close on overlay click and close on Esc

Boolean

false

noEscDismiss

Disable close on Esc

Boolean

false

noOutsideDismiss

Disable close on overlay click

Boolean

false

noPadding

Disable padding in the modal dialog

Boolean

false

okText

Text string to place in the default footer Ok button

String

"$t:ok"

onBeforeClose

Function to be called before closing

Function

onBeforeOpen

Function to be called before opening

Function

onCancel

Function to be called after cancel button is been pressed

Function

onClickOutside

Function to be called after clicking outside the modal

Function

onClose

Function to be called after closing

Function

onOk

Function to be called after pressing the "ok" button

Function

onOpen

Function to be called after opening the modal

Function

overlay

Use overlay: false to hide the overlay

Boolean

true

overlayOpacity

Set the overlay's opacity

Number | String

0.6

showNestedOverlay

Boolean

false

size

Set the size of the modal's width. "small", "medium" (default) or "large"

String

"medium"

sizesConfig

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": "medium",
  "sizes": {
    "small": 576,
    "medium": 768,
    "large": 992,
    "auto": "max-content"
  }
}
title

Text content to place in the title

String

""

withoutTransitions

Use without-transitions: true to turn off the open and close animations on the modal

Boolean

false

zIndex

Set the modal's z-index

Number | String

-

Events #

NameDescription

beforeClose

Emits before modal's start closing after transition started

beforeOpen

Emits before modal's open after transition started

cancel

Emits when the user closes the modal window without side effects

clickOutside

Emits when overlay is clicked

close

Emits when modal's is closed and transition is complete

ok

Emits when Ok button is clicked

open

Emits when modal's is open and transition is complete

update:modelValue

The event is triggered when the component needs to change visibility

Change log #