Components
Animated Dialog
A modal dialog component with smooth animations powered by motion-v.
Animated Dialog
The AnimatedDialog component is a modal dialog that combines the functionality of Nuxt UI's UModal with smooth animations powered by motion-v. It provides an enhanced user experience with customizable entrance and exit animations.
Usage
<template>
<MAnimatedDialog
title="Animated Dialog"
description="A modal dialog with smooth animations"
>
<UButton label="Open Dialog" color="primary" />
<template #body>
<div class="space-y-4">
<p>This is the content of the animated dialog.</p>
<p>You can add any content here, including forms, images, or other components.</p>
</div>
</template>
<template #footer="{ close }">
<div class="flex gap-2">
<UButton
label="Cancel"
color="neutral"
variant="outline"
@click="close"
/>
<UButton
label="Confirm"
color="primary"
@click="close"
/>
</div>
</template>
</MAnimatedDialog>
</template>
Props
title
string
The title of the dialog.
description
string
The description of the dialog.
content
object
The content of the dialog.
overlay
boolean
Render an overlay behind the dialog.
scrollable
boolean
When
true, enables scrollable overlay mode where content scrolls within the overlay.transition
boolean
Animate the dialog when opening or closing.
fullscreen
boolean
When
true, the dialog will take up the full screen.portal
string | boolean | HTMLElement
Render the dialog in a portal.
close
boolean | Partial<ButtonProps>
Display a close button to dismiss the dialog.
closeIcon
string | object
The icon displayed in the close button.
dismissible
boolean
When
false, the dialog will not close when clicking outside or pressing escape.ui
object
UI customization options.
open
boolean
The controlled open state of the dialog. Can be binded as
v-model:open.defaultOpen
boolean
The open state of the dialog when it is initially rendered.
modal
boolean
The modality of the dialog.
scale
number
The scale factor for the entrance/exit animation.
variants
object
Custom animation variants for the dialog.
transitionOptions
object
Custom transition options for the dialog animation.
Events
update:open
(open: boolean) => void
Emitted when the open state of the dialog changes.
Slots
default
The trigger element for the dialog.
body
The main content of the dialog.
header
{ close: () => void }
Custom header content. Provides a close function.
footer
{ close: () => void }
Custom footer content. Provides a close function.
title
Custom title content.
description
Custom description content.
close
{ ui: object }
Custom close button content.
Examples
Basic Usage
<template>
<MAnimatedDialog>
<UButton label="Open Basic Dialog" color="primary" />
<template #body>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2">Basic Dialog</h3>
<p>This is a basic animated dialog with default animations.</p>
</div>
</template>
</MAnimatedDialog>
</template>
Custom Scale Animation
<template>
<MAnimatedDialog :scale="0.8">
<UButton label="Strong Morph" color="secondary" />
<template #body>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2">Strong Morphing</h3>
<p>This dialog uses a stronger motion-v morphing effect.</p>
</div>
</template>
</MAnimatedDialog>
</template>
Custom Variants and Transition
<template>
<MAnimatedDialog
:variants="customVariants"
:transition-options="customTransition"
>
<UButton label="Custom Animation" color="warning" />
<template #body>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2">Custom Animation</h3>
<p>This dialog uses custom variants and transition props.</p>
</div>
</template>
</MAnimatedDialog>
</template>
<script setup>
const customVariants = {
initial: { opacity: 0, scale: 0.5, rotate: -15 },
animate: { opacity: 1, scale: 1, rotate: 0 },
exit: { opacity: 0, scale: 0.5, rotate: 15 }
}
const customTransition = {
type: 'spring',
bounce: 0.2,
duration: 0.5
}
</script>
With Header and Footer
<template>
<MAnimatedDialog
title="Dialog with Header and Footer"
description="This dialog has custom header and footer slots"
>
<UButton label="Open Complex Dialog" color="primary" />
<template #body>
<div class="p-4">
<p>This is the main content of the dialog. It can contain any Vue components or HTML elements.</p>
<div class="mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded">
<p>You can include forms, images, or any other content here.</p>
</div>
</div>
</template>
<template #footer="{ close }">
<div class="flex gap-2">
<UButton
label="Cancel"
color="neutral"
variant="outline"
@click="close"
/>
<UButton
label="Confirm"
color="primary"
@click="close"
/>
</div>
</template>
</MAnimatedDialog>
</template>