Modal

Modal component based on Headless UI Dialog component.

Usage

Use <VModal /> component to modal/dialog.

View Code

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <VButton @click="isOpen = true">
    Open Modal
  </VButton>
  <VModal
    v-model="isOpen"
  >
    <VModalBody>
      Your payment has been successfully submitted. We've sent you an email with all of the details of your order.
    </VModalBody>
  </VModal>
</template>

With Header

Use <VModalVModal /> to add header to the modal.

View Code

<script setup lang="ts">
const isOpen = ref(false)
</template>

<template>
  <VButton @click="isOpen = true">
    Open Modal
  </VButton>
  <VModal
    v-model="isOpen"
  >
    <VModalHeader>
      Payment successful
    </VModalHeader>
    <VModalBody>
      Your payment has been successfully submitted. We've sent you an email with all of the details of your order.
    </VModalBody>
  </VModal>
</template>

Dismissable Header

Add dismissable prop to the <VModalHeader /> component to add dismissable button.

View Code

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <VButton @click="isOpen = true">
    Open Modal
  </VButton>
  <VModal
    v-model="isOpen"
  >
    <VModalHeader dismissable>
      Payment successful
    </VModalHeader>
    <VModalBody>
      Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
    </VModalBody>
  </VModal>
</template>

Use <VModalFooter /> to add footer to the modal.

View Code

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <VButton @click="isOpen = true">
    Open Modal
  </VButton>
  <VModal
    v-model="isOpen"
  >
    <VModalHeader>
      Payment successful
    </VModalHeader>
    <VModalBody>
      Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
    </VModalBody>
    <VModalFooter>
      <VButton @click="isOpen = false">
        Got it, thanks!
      </VButton>
    </VModalFooter>
  </VModal>
</template>

Persistent

Use persistent to make modal persistent.

View Code

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <VButton @click="isOpen = true">
    Open Modal
  </VButton>
  <VModal
    v-model="isOpen"
    persistent
  >
    <VModalHeader dismissable>
      Payment successful
    </VModalHeader>
    <VModalBody>
      Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
    </VModalBody>
  </VModal>
</template>

Fullscreen

Use fullscreen to make modal fullscreen.

View Code

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <VButton @click="isOpen = true">
    Open Modal
  </VButton>
  <VModal
    v-model="isOpen"
    fullscreen
  >
    <VModalHeader dismissable>
      Payment successful
    </VModalHeader>
    <VModalBody>
      Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
    </VModalBody>
  </VModal>
</template>

Props

Prop Name	Type	Default Value	Description
`modelValue`	`Boolean`	`false`	Sets the visibility of the modal. When `modelValue` is set to `true`, the modal is visible, and when it's set to `false`, the modal is hidden.
`persistent`	`Boolean`	`false`	Determines whether the modal should persist even when the user clicks outside the modal. By default, the modal will close when the user clicks outside of it. Setting this prop to `true` will prevent that behavior.
`fullscreen`	`Boolean`	`false`	Make modal fullscreen

Events

Name	Payload	Description
`update:modelValue`	`{value: boolean}`	Triggered when `modelValue` prop changed

Slots

Name	Payload	Description
`default`	None	The default Vue slot.

Sub Components

<VModalHeader />
<VModalBody />
<VModalFooter />