@dynamicforms/vuetify-modal-form-kit

Programmatic & Template Dialog API
Open dialogs from code with a promise-based API (e.g. await modal.message()) and get the result back directly — no events, no callbacks. Or declare dialogs in Vue templates using df-modal component.
One Dialog at a Time
The library maintains an internal stack — if code tries to open a second dialog while one is already visible, it will suspend the first dialog while the second is on-screen.
Programmatic Form Builder
Define responsive Vuetify grid layouts (rows → columns → components) entirely in TypeScript using a fluent FormBuilder API, without writing any template markup.
Keyboard Shortcuts
Press Enter to confirm or Esc to cancel the active dialog — no extra wiring needed.

Introduction

@dynamicforms/vuetify-modal-form-kit is a Vue 3 + Vuetify 3 library built around four design goals:

Programmatic & template-based dialog API — open dialogs from code with a promise-based API (await modal.message(), await modal.yesNo()) and get the result back directly, without events or callbacks. Or declare dialogs in Vue templates with <df-modal>.

One dialog on screen at a time — an internal stack ensures only one dialog is ever visible: opening a second dialog suspends the first (kept open but hidden) and shows the second on top; the first reappears once the second closes. The stack is module state, so there is one per page and every Vue app on it shares that one, and one view draws it: mount <modal-view> once — a second mounted view warns on the console and renders nothing.

Programmatic form builder — a fluent FormBuilder API lets you define responsive Vuetify grid layouts entirely in TypeScript, with no template markup required.

Keyboard shortcuts — <Enter> confirms and <Esc> cancels the active dialog. A keystroke an overlay above the dialog answers - a select menu, a date picker - is that overlay's alone.

DynamicForms Vuetify Modal Form KitModal dialogs and programmatic form layouts for Vue 3 + Vuetify 3

Programmatic & Template Dialog API

One Dialog at a Time

Programmatic Form Builder

Keyboard Shortcuts

Introduction

Next steps

DynamicForms Vuetify Modal Form KitModal dialogs and programmatic form layouts for Vue 3 + Vuetify 3

Programmatic & Template Dialog API

One Dialog at a Time

Programmatic Form Builder

Keyboard Shortcuts

@dynamicforms/vuetify-modal-form-kit ​

Introduction ​

Next steps ​

Introduction

Next steps