Use Cases
Modal Nested
Open a <ModalConfirm> on top of another one.
Confirm in the first modal opens a second one on top of it. Each modal closes on its own: Cancel, Esc or a click outside closes only the topmost one.
Preview
Preview.vue
<script setup lang="ts">
import { useModal } from 'vue-final-modal'
import ModalConfirm from './ModalConfirm.vue'
const modalSecond = useModal({
component: ModalConfirm,
attrs: {
title: 'The second confirm modal',
onConfirm() {
modalSecond.close()
},
},
})
const modalFirst = useModal({
component: ModalConfirm,
attrs: {
title: 'The first confirm modal',
onConfirm() {
modalSecond.open()
},
},
slots: {
default: 'Magna deserunt nulla aliquip velit aute. Et occaecat elit nulla excepteur labore cupidatat. Duis culpa mollit commodo dolor qui Lorem qui laborum elit elit Lorem occaecat. Commodo eiusmod esse voluptate officia amet quis occaecat aliqua. Proident do irure amet ut occaecat dolor laboris consectetur.',
},
})
</script>
<template>
<VButton @click="() => modalFirst.open()">
Open Modal
</VButton>
</template>
<ModalConfirm> component
<script setup lang="ts">
import { useId } from 'vue'
import { VueFinalModal } from 'vue-final-modal'
defineProps<{
title?: string
}>()
const emit = defineEmits<{
(e: 'confirm'): void
}>()
const titleId = useId()
</script>
<template>
<VueFinalModal
v-slot="{ close }"
class="flex justify-center items-center"
content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
content-transition="vfm-fade"
overlay-transition="vfm-fade"
:aria-labelledby="titleId"
>
<h1 :id="titleId" class="text-xl">
{{ title }}
</h1>
<slot />
<div class="flex justify-end gap-2">
<button type="button" class="px-2 border rounded-lg" @click="close()">
Cancel
</button>
<button type="button" class="px-2 border rounded-lg" @click="emit('confirm')">
Confirm
</button>
</div>
</VueFinalModal>
</template>