Vue3 Html Dialog

This library provides flexible, accessible, and customizable dialog components for Vue 3 using the native <dialog> element.

Features

• Accessible out-of-the-box with native <dialog> support
• HtmlDialog.vue: customizable dialog with backdrop, escape key, click-to-close, transitions, and more
• FullNativeDialog.vue: lightweight, native dialog with transitions
• Simple imperative API via ref
• Fully typed with TypeScript
• Animatable with custom classes

Installation

npm install vue-html-dialog

or with:

yarn add vue-html-dialog

or with:

pnpm add vue-html-dialog

Or use it directly via CDN:

<script src="https://unpkg.com/vue-html-dialog"></script>

Usage

Importing the Component

import { HtmlDialog, FullNativeDialog } from 'vue-html-dialog'
import 'vue-html-dialog/vue-html-dialog.css'

Registering Globally

const app = createApp(App)
app.component('HtmlDialog', HtmlDialog)
app.component('FullNativeDialog', FullNativeDialog)

Basic Example

<template>
  <button @click="showDialog">Open Dialog</button>
  <HtmlDialog ref="dialogRef" :model-value="true" @close="onClose">
    <p>This is the content of the dialog.</p>
  </HtmlDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HtmlDialog } from 'vue-html-dialog'

const dialogRef = ref()

function showDialog() {
  dialogRef.value?.openDialog()
}

function onClose() {
  console.log('Dialog closed')
}
</script>

HtmlDialog

Props

| Prop | Type | Default | Description | |-----------------------|-----------|--------------|-------------| | modelValue | boolean | false | Controls dialog visibility | | showBackdrop | boolean | true | Shows a backdrop | | closeOnBackdropClick| boolean | true | Closes on backdrop click | | closeOnOutsideClick | boolean | true | Closes on outside click (when no backdrop) | | closeOnEscape | boolean | true | Closes on Escape key | | showCloseButton | boolean | true | Shows close × button | | enterActiveClass | string | 'fade-enter-active' | Transition class on enter | | leaveActiveClass | string | 'fade-leave-active' | Transition class on leave | | transitionDuration | number | 300 | Transition time in ms |

Slots

• Default slot: Content inside the dialog.

Events

| Event | Description | |-----------|-------------| | open | Fires when dialog opens | | close | Fires when dialog closes |

FullNativeDialog

This component is a lightweight wrapper around the native <dialog> element, providing a simple way to create dialogs with transitions.

Props for

| Prop | Type | Default | Description | |-----------------------|-----------|--------------|-------------| | modelValue | boolean | false | Controls dialog visibility | | showBackdrop | boolean | true | Shows a backdrop | | closeOnBackdropClick| boolean | true | Closes on backdrop click | | closeOnOutsideClick | boolean | true | Closes on outside click (when no backdrop) | | closeOnEscape | boolean | true | Closes on Escape key | | showCloseButton | boolean | true | Shows close × button | | enterActiveClass | string | 'fade-enter-active' | Transition class on enter | | leaveActiveClass | string | 'fade-leave-active' | Transition class on leave | | transitionDuration | number | 300 | Transition time in ms |

Slots

• Default slot: Content inside the dialog.

Events

| Event | Description | |-----------|-------------| | update:modelValue | Syncs dialog visibility | | open | Fires when dialog opens | | close | Fires when dialog closes |

Notice

If you used a previous version of this library, please note that the component API has changed:

• HtmlDialog is the new name for the classic dialog component and now has props and events for better control.
• FullNativeDialog is new

License

MIT