Closed haztakki closed 2 years ago
You shouldn't use a layout in the modal component. Layout can only be used for the root
(parent) page.
Also, you should use the methods close
, redirect
, and the visibility variable show
provided by the useModal()
method, to manage the state of the modal.
Please check the official example implementation.
<script setup>
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue";
import { CheckIcon } from "@heroicons/vue/24/outline";
import { useModal } from "momentum-modal";
const { show, close, redirect } = useModal();
</script>
<template>
<TransitionRoot :show="show" as="template">
<Dialog as="div" class="relative z-10" @close="close">
<TransitionChild
@after-leave="redirect"
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</TransitionChild>
</Dialog>
</TransitionRoot>
</template>
Check the video with the changes applied: https://share.cleanshot.com/9H6b8k.
Hey, Thanks for looking into this. Yeah, the layout doesn't make sense in the modal component. Though the other side effects I mentioned was also throwing me a bit. I guess I just needed to use close and redirect methods like you said. I guess this is the missing piece. Thanks! I'll close this now, and I will reopen if needed.
Hello, As promised, here it is. See the README file. https://github.com/HazJ/momentum-modal-example