Vuelity | VTModal

Vuelity

This is eqiuvalent to ordinary Vue :style bindings but targets specific elements within the component.
:styles="{}"
:containerStyles="{}"
Determines whether to display an exit-fullscreen notification.
:notify="true"
Emits an event when clicking outside the inner-content.
@close="closeModal()"

<VTModal> utilises Vue 3's <teleport> component to transport itself before the closing <body> tag.

<VTModal
v-if="yourCondition"
:styles="{}"
:containerStyles="{}"
:notify="true"
@close="closeModal()"
>
Vue slot for any valid HTML
<h1>VTModal<h1>
</VTModal>
Try a full demo on Codepen!