Modal magic for Vue3

Open modals from any function, stack them as needed, and style them however you want. No template boilerplate, no manual state — just call and await.

Get Started Try the Playground Open on GitHub

If this package saved you time, you can buy me a coffee — it keeps me building.

What runs on click

import { openModal } from '@kolirt/vue-modal'
import DemoDialog from './DemoDialog.vue'

openModal(DemoDialog, {
  props: { title: 'Hello from JS!', level: 1 }
})
  .then(() => { lastResult = 'confirmed' })
  .catch(() => { lastResult = 'closed' })

Live demo

Why this library

Less boilerplate, cleaner control flow, and room to bring your own styles.

Open from JS/TS

Trigger modals from any function and await the user's response — a single call returns a typed promise with full TypeScript inference for props and result.

Less template boilerplate

Skip placing every modal in your templates and wiring open/close state by hand. Register one mount point and trigger any modal from code with a single call.

Cascading modals

Open multiple modals one after another while preserving their state and context. Layer a confirmation on top of a form without losing the form's data.

Highly customizable

Headless primitives with no imposed styles. Bring your own CSS, transitions, and animations — compose modals that fit any design system.

Modal groups

Isolate flows with named groups — the main app stack, confirm dialogs, side panels — each rendering in its own mount point with its own queue.

Async components

Open any Vue component, including async ones loaded on demand. Heavy modals stay out of your initial bundle and resolve through the same promise.