Components/Modal.vue

Reusable Vue modal dialog with backdrop, animations, and keyboard support

<!--
  Source: https://github.com/laravel/breeze | License: MIT | Copyright Taylor Otwell
  Provided via justclaw.it.com; keep this notice with the code.
-->
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

const props = withDefaults(
    defineProps<{
        show?: boolean;
        maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
        closeable?: boolean;
    }>(),
    {
        show: false,
        maxWidth: '2xl',
        closeable: true,
    },
);

const emit = defineEmits(['close']);
const dialog = ref();
const showSlot = ref(props.show);

watch(
    () => props.show,
    () => {
        if (props.show) {
            document.body.style.overflow = 'hidden';
            showSlot.value = true;

            dialog.value?.showModal();
        

... (truncated -- full source via MCP)