vue-layerx Turns Any Vue Dialog Into a One-Line Imperative Call
Vue projects that lean heavily on dialogs and drawers accumulate repetitive `v-model` boilerplate and tightly coupled shell-content components that resist reuse. vue-layerx provides an imperative escape hatch without replacing the component library or forcing JSX, which lowers the migration cost for teams already invested in Element Plus, Ant Design Vue, or custom design systems.
vue-layerx 1.0.1 introduces a container-content model for Vue 3 modals. A `createLayer` call adapts any existing component library's Dialog or Drawer—Element Plus, Ant Design Vue, Vant, or a custom shell—into a reusable `useDialog` function. From there, opening a dialog with any business component takes a single `dialog.open()` call, with no `visible` state to manage in the page template. Slots remain template-based through `LayerTemplate`, avoiding mandatory JSX, and content components can self-configure their container via `defineLayer` so footer slots and width preferences travel with the business logic.
For enterprise teams, configuration stacking follows a clear priority chain: infrastructure defaults from `createLayer`, content contracts from `defineLayer`, and caller overrides at `useDialog` or `open`. An `adapter` hook runs after all layers merge, letting teams enforce site-wide policies like disabling mask-close across every dialog. The library also handles `Provide/Inject` context repair under imperative calls, reactive dependency tracking for cross-instance slot transmission, and `await dialog.confirm()` for result-waiting workflows.
Test coverage sits at 100% across statements, branches, functions, and lines with over 300 test cases. It ships as full TypeScript with Vue as its only peer dependency and supports SSR in Nuxt and Vite SSR setups.
Most imperative dialog solutions for Vue push teams toward JSX for slot content, which fragments the template workflow. vue-layerx's `LayerTemplate` keeps slots in the template, so a team can adopt imperative dialogs without a second syntax.
Letting content components declare container preferences through `defineLayer` inverts the usual ownership model. The business component carries its own dialog width and footer, so the calling page doesn't need to know those details, which reduces prop-drilling across layers.
The `adapter` hook is a small but sharp addition. Configuration stacking handles defaults and overrides, but a post-merge hook is the only way to guarantee a policy like 'no mask-close ever' survives every override path—something most modal managers lack.