vue-final-modal

import { createApp, ref } from 'vue' import { VueFinalModal, useModal, ModalsContainer } from 'vue-final-modal' const app = createApp({ template: ` <button @click="openModal">Open Modal</button> <VueFinalModal v-model="showModal" classes="flex justify-center items-center" content-class="relative flex flex-col max-h-full mx-4 p-4 border dark:border-gray-800 rounded bg-white dark:bg-gray-900" :overlay-transition="'vfm-fade'" :content-transition="'vfm-slide-up'" @before-close="beforeClose" > <h1 class="text-xl">Hello, Vue Final Modal!</h1> <p>This is a custom modal opened via a ref.</p> <button class="mt-4 p-2 bg-blue-500 text-white rounded" @click="showModal = false">Close</button> </VueFinalModal> <button @click="openProgrammaticModal">Open Programmatic Modal</button> <ModalsContainer /> `, setup() { const showModal = ref(false) const { open, close } = useModal({ component: VueFinalModal, attrs: { title: 'Programmatic Modal', onUpdateModelValue: (val) => console.log('Programmatic modal v-model:', val) }, slots: { default: '<p>This modal was opened programmatically!</p><button @click="options.close">Close</button>' } }) function openModal() { showModal.value = true } function beforeClose() { console.log('Modal is about to close') // You can prevent closing here if needed // return false } function openProgrammaticModal() { open() } return { showModal, openModal, beforeClose, openProgrammaticModal } } }) app.component('VueFinalModal', VueFinalModal) app.mount('#app')