vue-dialogue

A flexible Vue 3 modal, sidebar, and dialogue component with multiple positions and smooth animations. Built using TailwindCSS and Headless UI, it supports full customization of size, overlay, and content slots.

Features

• Fully responsive and lightweight Vue 3 modal/dialogue component
• Supports multiple positions:
  • Center, Top, Bottom, Left, Right
  • Corner combinations like top-left, bottom-right, etc.
• Smooth animations with 50+ built-in transition effects
• Customizable overlay and modal body
• Slots for header, body, and footer
• Accessible with initialFocus support
• Easy integration as a plugin or component
• Supports TailwindCSS utility classes

Installation

Using npm:

npm install vue-dialogue

Using Yarn:

yarn add vue-dialogue

Basic Usage

<template>
  <div>
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">
      Open Modal
    </button>

    <vueDialogue
      v-model:isShow="isOpen"
      dialoguePosition="center"
      :modalSize="'max-w-md'"
      animation="fade-scale"
      overlayClass="bg-black/50"
    >
      <template #header>
        <h2 class="text-lg font-bold">Modal Header</h2>
      </template>

      <p class="p-4">This is the main body content of the modal.</p>

      <template #footer>
        <button @click="isOpen = false" class="px-4 py-2 bg-red-500 text-white rounded">
          Close
        </button>
      </template>
    </vueDialogue>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vueDialogue from 'vue-dialogue'

const isOpen = ref(false)
</script>

Props

| Prop | Type | Default | Description | |-----------------------|-----------|-------------|-------------| | isShow | Boolean | false | Controls modal visibility. | | overlayClass | String | "bg-black/25" | Tailwind classes for overlay styling. | | isOverlay | Boolean | true | Show overlay behind modal. | | isOverlayClose | Boolean | true | Close modal when overlay clicked. | | mainModalClass | String | "" | Additional classes for root dialog container. | | modalMainClass | String | "bg-black/25" | Classes for modal wrapper div. | | modalSubClass | String | "" | Classes for positioning container. | | dialoguePosition | String | "center" | Position of modal: "center" | "top-left" | "top-center" | "top-right" | "left-center" | "left-bottom" | "center-bottom" | "right-center" | "right-bottom" | | modalSize | String | "max-w-md" | Tailwind width class for modal panel. | | modalBodyClass | String | "" | Classes for modal body/scrollable content. | | animation | String | "fade-scale" | Modal open/close animation (50+ options, e.g., scale, bounce, slide-top, toast-bottom). |

Note: initialFocus is available via ref for accessibility.

Slots

• header: Content for modal header (optional)
• Default slot (body): Main modal content
• footer: Content for modal footer, typically buttons

<vueDialogue :isShow="true">
  <template #header>
    <h2 class="text-lg font-bold">Header</h2>
  </template>

  <p>Main content goes here</p>

  <template #footer>
    <button class="btn">Close</button>
  </template>
</vueDialogue>

dialoguePosition

The component supports all Positions, which can be applied

• top-right, right-center, right-bottom
• top-center, center, bottom-center
• top-left, left-center, left-bottom

Example:

<vueDialogue :isShow="true"   dialoguePosition="center">
  <p>dialogue Position effect!</p>
</vueDialogue>

Animations

The component supports 50+ animations, which can be applied via the animation prop:

• none, fade, scale, fade-scale, zoom-blur
• slide-top, slide-bottom, slide-left, slide-right
• fade-slide-top, fade-slide-bottom, fade-slide-left, fade-slide-right
• drawer-left, drawer-right, drawer-bottom, drawer-top
• sheet-bottom, sheet-top
• bounce, pop, pop-soft, elastic, spring
• rotate, rotate-soft, flip-x, flip-y, spin-in
• toast-top, toast-bottom, toast-left, toast-right
• expand, collapse, grow-top, grow-bottom
• shake, shake-soft, pulse, flash

Example:

<vueDialogue :isShow="true" animation="bounce">
  <p>Animated modal with bounce effect!</p>
</vueDialogue>

Customization Tips

• Use Tailwind classes for modal panel, overlay, or container customization.
• Use initialFocus ref for accessibility, e.g., first input or close button.
• Combine dialoguePosition with animation for realistic effects:
  • slide-left for left sidebar
  • slide-top for top notification modal
  • toast-bottom for toast notifications
• Overlay can be toggled or styled differently for light/dark modes.

Accessibility

• Focus is trapped inside the modal using Headless UI Dialog mechanics.
• initialFocus ensures the first focusable element is focused.
• Overlay click closes the modal if isOverlayClose is enabled.
• Works well with screen readers.