How to Create a Modal in Vue: Simple Step-by-Step Guide

To create a modal in Vue, define a component with a visible state controlled by a ref or reactive variable. Use conditional rendering with v-if to show or hide the modal, and add event handlers to toggle its visibility.

Syntax

A modal in Vue is typically a component that uses a reactive variable to control its visibility. The key parts are:

• ref or reactive to hold the modal's open/close state.
• v-if directive to conditionally render the modal based on the state.
• Event handlers like @click to open or close the modal.

vue

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <button @click="showModal = false">Close</button>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

Output

A button labeled 'Open Modal' that when clicked shows a modal with content and a 'Close' button.

Example

This example shows a complete Vue component that creates a modal. Clicking the 'Open Modal' button shows the modal overlay with some text and a 'Close' button to hide it.

vue

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
      <div class="modal-box" @click.stop>
        <h2>Modal Title</h2>
        <p>This is the modal content.</p>
        <button @click="showModal = false">Close</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-box {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

Output

A page with an 'Open Modal' button that opens a centered white box modal with a title, text, and a 'Close' button on a dark transparent background.

Common Pitfalls

Common mistakes when creating modals in Vue include:

• Not using v-if or v-show to control visibility, causing the modal to always render.
• Not stopping event propagation on modal content, so clicking inside closes the modal unintentionally.
• Forgetting to add a way to close the modal, like a close button or clicking outside.
• Not using scoped styles or proper layering, causing the modal to appear behind other content.

vue

<!-- Wrong: modal always visible -->
<div class="modal">Modal content</div>

<!-- Right: modal visibility controlled -->
<div v-if="showModal" class="modal">Modal content</div>

Quick Reference

Tips for creating modals in Vue:

• Use ref(false) to track if modal is open.
• Use v-if to render modal only when open.
• Add @click.self on overlay to close modal when clicking outside content.
• Use scoped CSS to style modal overlay and box.
• Always provide a close button inside modal.

Key Takeaways

Use a reactive variable with ref to control modal visibility.

Render the modal conditionally with v-if to show or hide it.

Add event handlers to open and close the modal, including clicking outside or a close button.

Style the modal overlay and content for clear visibility and user focus.

Avoid rendering the modal permanently to prevent UI clutter and performance issues.