VDialog ​

VDialog is a lightweight wrapper around Element Plus ElDialog with a smaller API surface. It enables centered layout by default, adds a built-in base-dialog class, defaults destroy-on-close to true, and keeps close-on-click-modal disabled unless you opt in.

Basic Usage ​

<template>
  <el-button @click="visible = true">Open Dialog</el-button>
  <v-dialog v-model="visible" title="Dialog Title" width="500px">
    <p>Dialog content goes here.</p>
    <template #footer>
      <el-button @click="visible = false">Cancel</el-button>
      <el-button type="primary" @click="visible = false">Confirm</el-button>
    </template>
  </v-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

Behavior Notes ​

• VDialog only exposes model-value, title, width, class, destroy-on-close, and close-on-click-modal from the wrapper, and forwards any extra ElDialog props through dialog-props.
• The underlying dialog always renders with align-center enabled.
• The rendered dialog class always includes base-dialog. The class prop appends extra class names to it.
• close-call-back is emitted whenever the dialog visibility changes to false, whether the dialog closes itself or the parent sets v-model to false.

API ​

VDialog Attributes ​

VDialog Events ​

VDialog Slots ​

All named slots are forwarded to ElDialog. Commonly used slots are listed below.

Source ​

Docs