В Vue 3 модальные окна обычно реализуются через условный рендеринг и управление состоянием видимости. Основная идея — хранить булевую переменную, которая отвечает за показ модального окна, и переключать её при необходимости.

Пример простого модального окна:

<template>
  <button @click="showModal = true">Открыть модальное окно</button>

  <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
    <div class="modal-content">
      <h2>Заголовок модального окна</h2>
      <p>Содержимое модального окна</p>
      <button @click="showModal = false">Закрыть</button>
    </div>
  </div>
</template>

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

<style>
.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-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

Также можно вынести модальное окно в отдельный компонент и управлять его видимостью через props и события. Для более сложных случаев удобно использовать сторонние библиотеки (например, Vue Final Modal, Vuedals) или порталы для рендеринга модального окна вне основного DOM-дерева.

Как работать с модальными окнами во Vue 3?