Skip to main content

​
Overview

Animated Modal is a modal dialog component featuring 3D entrance animations, blurred backdrop, and flexible controls. Built with motion-v for smooth animations.

​
Usage

<template>
  <AnimatedModal v-model:open="isOpen">
    <AnimatedModalTrigger>
      <button>Open Modal</button>
    </AnimatedModalTrigger>
    <AnimatedModalBody>
      <AnimatedModalContent>
        <!-- Your content here -->
      </AnimatedModalContent>
      <AnimatedModalFooter>
        <!-- Footer actions -->
      </AnimatedModalFooter>
    </AnimatedModalBody>
  </AnimatedModal>
</template>

​
API Reference

​
<AnimatedModal />

​
Props

Prop NameTypeDefaultDescription
openboolean-Controlled open state.
defaultOpenbooleanfalseUncontrolled initial state.
closeOnEscbooleantrueClose modal when pressing Esc

​
Events

Event NamePayloadDescription
update:openbooleanFired when open state changes.
open-Fired when openModal() is called.
close-Fired when closeModal() is called.

​
Slots

Slot NameSlot Props
defaultopen, openModal, closeModal, toggle

​
Composable

  • useAnimatedModal() — access modal state/methods from any nested child component (must be used within <AnimatedModal />).

​
<AnimatedModalBody />

​
Props

Prop NameTypeDefaultDescription
classstring""Extra classes for the modal panel.
overlayClassstring""Extra classes for the overlay.
contentClassstring""Extra classes for the content wrapper.
showClosebooleantrueShow close button.
closeOnOutsidebooleantrueClose when clicking outside the dialog.
lockScrollbooleantrueLock page scroll while the modal is open.
zIndexnumber10000Z-index for the modal layer.
teleportTostring | HTMLElement"body"Teleport target for the modal layer.

​
Dependencies

  • motion-v
  • @vueuse/core

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us