Modal Nested

  <script setup lang="ts">
  import { ModalsContainer, useModal } from 'vue-final-modal'
  import ModalConfirm from './ModalConfirm.vue'

  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.',
    },
  })

  const modalSecond = useModal({
    component: ModalConfirm,
    attrs: {
      title: 'The second confirm modal',
      onConfirm() {
        modalSecond.close()
      },
    },
  })

  function openConfirm2() {
    modalSecond.open()
  }
  </script>

  <template>
    <VButton @click="() => modalFirst.open()">
      Open Modal
    </VButton>

    <ModalsContainer />
  </template>

  <script setup lang="ts">
  import { VueFinalModal } from 'vue-final-modal'

  defineProps<{
    title?: string
  }>()

  const emit = defineEmits<{
    (e: 'update:modelValue', modelValue: boolean): void
    (e: 'confirm'): void
  }>()
  </script>

  <template>
    <VueFinalModal
      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"
      @update:model-value="val => emit('update:modelValue', val)"
    >
      <h1 class="text-xl">
        {{ title }}
      </h1>
      <slot />
      <button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
        Confirm
      </button>
    </VueFinalModal>
  </template>