Create a reusable Vue modal box component, first define Modal.vue as the base container, including mask layer, title, content and bottom slots; 2. Use slots to achieve flexibility, customize content through header, default and footer slots; 3. Control display and hide through v-model:isOpen binding in the parent component to achieve two-way communication; 4. Optional enhancements include adding transition animation, ESC key closing, focus locking and customization class names; finally obtaining a reusable, customizable and accessible modal box component, suitable for the entire application range.

Building a reusable modal component in Vue is a practical way to avoid duplicating UI and logic across your app. A well-structured modal can be used for alerts, forms, confirmations, or any content that needs to appear on top of the current view. Here's how to create one that's flexible, clean, and easy to reuse.

1. Create a Base Modal Component

Start by creating a Modal.vue component. This will be your reusable container.

 <!-- components/Modal.vue -->
<template>
  <div v-if="isOpen" class="modal-overlay" @click="handleOverlayClick">
    <div class="modal" :style="{ width }" @click.stop>
      <!-- Header -->
      <div v-if="$slots.header || title" class="modal-header">
        <slot name="header">
          <h3>{{ title }}</h3>
        </slot>
        <button @click="close" class="modal-close">&times;</button>
      </div>

      <!-- Body -->
      <div class="modal-body">
        <slot />
      </div>

      <!-- Footer -->
      <div v-if="$slots.footer" class="modal-footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from &#39;vue&#39;

const emit = defineEmits([&#39;update:isOpen&#39;, &#39;close&#39;])

const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    default: &#39;&#39;
  },
  width: {
    type: String,
    default: &#39;500px&#39;
  },
  closeOnClickOutside: {
    type: Boolean,
    default: true
  }
})

const close = () => {
  emit(&#39;update:isOpen&#39;, false)
  emit(&#39;close&#39;)
}

const handleOverlayClick = () => {
  if (props.closeOnClickOutside) {
    close()
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>

2. Use Slots for Maximum Flexibility

The component uses Vue's named slots ( header , default body , footer ) so you can customize content without changing the base logic.

• Default slot : Main content.
• header slot : Replace or enhance the title area.
• footer slot : Add action buttons like "Cancel" and "Save".

This makes the modal work for forms, confirmations, or info popups.

3. Use the Modal in a Parent Component

Now use it anywhere with v-model -style binding.

 <!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="showModal = true">Open Modal</button>

    <Modal v-model:isOpen="showModal" title="User Details">
      <p>Enter user information below:</p>
      <input v-model="name" placeholder="Name" class="input" />

      <template #footer>
        <button @click="showModal = false" class="btn btn-secondary">Cancel</button>
        <button @click="save" class="btn btn-primary">Save</button>
      </template>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import Modal from &#39;@/components/Modal.vue&#39;

const showModal = ref(false)
const name = ref(&#39;&#39;)

const save = () => {
  alert(`Saved: ${name.value}`)
  showModal.value = false
}
</script>

? This uses v-model:isOpen thanks to the update:isOpen event.

4. Optional Enhancements

You can improve the modal further:

• Add transitions : Wrap the modal in a <transition> for smooth fade-in/out effects.

   <transition name="modal-fade">
    <div v-if="isOpen" class="modal-overlay">
      <!-- modal content -->
    </div>
  </transition>

• Trap focus (accessibility): Use directives or libraries to trap keyboard focus inside the modal.

• ESC key close : Add a key listener in onMounted :

   const handleEsc = (e) => {
    if (e.key === 'Escape') close()
  }
  onMounted(() => window.addEventListener('keydown', handleEsc))
  onUnmounted(() => window.removeEventListener('keydown', handleEsc))

• Pass custom classes : Add a modalClass prop to style the inner modal box dynamically.

---

Final Notes

This modal is:

• Reusable across the app
• Customizable via slots
• Controllable via v-model
• Accessible and clean

You can extract it into a UI library or use it with Pinia/Vuex for global modal state if needed.

Basically, just pass isOpen , listen for updates, and plug in your content. That's it.

The above is the detailed content of How to build a reusable modal component in Vue?. For more information, please follow other related articles on the PHP Chinese website!