Registry / web-framework / vue-universal-modal

vue-universal-modal

library1.1.4jsnpmunverified

Vue Universal Modal is a lightweight and simple modal plugin specifically designed for Vue 3 applications, leveraging Vue's built-in `teleport` feature. Currently at version 1.1.4, its release cadence appears to be relatively infrequent, with updates primarily focusing on bug fixes and dependency bumps since its last feature addition in v1.1.0 in April 2021. Key differentiators include its reliance on `teleport` for efficient DOM management, built-in accessibility (A11Y) features, and support for Server-Side Rendering (SSR) by requiring a pre-defined teleport target in the HTML. It provides essential modal functionalities like add/remove, visibility control, transitions, and automatic keyboard/mouse binding for closing, making it a robust solution for managing modals in modern Vue applications.

web-framework

npm install vue-universal-modal

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-UNIVERSAL-MODA

vue-universal-modal

web-frameworkjavascriptv1.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueUniversalModal

✓ import VueUniversalModal from 'vue-universal-modal';

✗ const VueUniversalModal = require('vue-universal-modal');

The library primarily ships as an ES module for Vue 3. CommonJS `require` is not the idiomatic way to import.

CSS Styles

✓ import 'vue-universal-modal/dist/index.css';

The core CSS styles for the modal are provided separately and must be imported to apply default styling. This should typically be done once in your application's entry point.

Modal Component

✓ <Modal v-model="isShow">...</Modal>

The `Modal` component is globally registered when you `app.use(VueUniversalModal, { ... })`. You should use its tag name directly in your templates. If you customized `modalComponent` option during installation, use that custom name.

This quickstart demonstrates how to install `vue-universal-modal` as a Vue 3 plugin and integrate a basic modal into a component using `v-model` for visibility control.

import { createApp, ref, defineComponent } from 'vue'; import VueUniversalModal from 'vue-universal-modal'; import 'vue-universal-modal/dist/index.css'; // Assuming you have an index.html with <div id="app"></div> and <div id="modals"></div> const app = createApp({ template: ` <p> <button @click="showModal">Show modal</button> </p> <Modal v-model="isShow" :close="closeModal"> <div class="modal-content"> <p>Hello from Universal Modal!</p> <button @click="closeModal">Close Modal</button> </div> </Modal> `, setup() { const isShow = ref(false); function showModal() { isShow.value = true; } function closeModal() { isShow.value = false; } return { isShow, showModal, closeModal, }; }, }); app.use(VueUniversalModal, { teleportTarget: '#modals', modalComponent: 'Modal', // Default, explicitly set for clarity }); app.mount('#app'); // Basic CSS for demonstration (include in your main CSS or style block) // .modal-content { // width: 300px; // padding: 30px; // box-sizing: border-box; // background-color: #fff; // font-size: 20px; // text-align: center; // }

Debug

Known issues

breakingThe modal component's visibility control changed from using `v-if` to `v-model`. Using `v-if` will prevent close animations from working correctly, and the `emitClose` slot argument was deprecated.

fix

Migrate from `v-if="isShow"` to `v-model="isShow"` on your `<Modal>` component. Ensure your `close` prop function updates the v-model bound variable.

affects: >=1.1.0

breakingThis plugin is exclusively designed for Vue 3. It does not support Vue 2 applications, and attempting to use it will result in errors related to Vue 3 specific features like `teleport`.

fix

Ensure your project is running Vue 3. If you are on Vue 2, you will need to find an alternative modal solution or migrate your application to Vue 3.

affects: >=1.0.0

gotchaThe `teleportTarget` option, which specifies where the modal content is rendered in the DOM, must point to an element that is already present in your `index.html` file. This is particularly important for Server-Side Rendering (SSR) environments.

fix

Add a target HTML element (e.g., `<div id="modals"></div>`) to your `index.html` file, typically just before the closing `</body>` tag, and configure the plugin with `teleportTarget: '#modals'` (or your chosen selector).

affects: >=1.0.0

gotchaWhile the plugin handles basic modal functionality, it does not provide custom styling out-of-the-box beyond a minimal `index.css`. Developers are expected to provide their own styles for the modal content and potentially the overlay.

fix

Apply your custom CSS to the content within the `<Modal>` slot and, if necessary, override default styles or provide your own for the modal backdrop and container via CSS.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: Modal

The `Modal` component either wasn't globally registered, or the `modalComponent` option in `app.use()` was changed to a different name.

fix

Ensure `app.use(VueUniversalModal, { ... })` is called before mounting your app, and that you are using the correct `modalComponent` name (default is 'Modal') in your template.

TypeError: app.use is not a function

Attempting to use `VueUniversalModal` with Vue 2's `Vue.use()` syntax or an incorrect Vue instance.

fix

This plugin is for Vue 3. Ensure you are importing `createApp` from 'vue' and calling `app.use()` on the application instance returned by `createApp()`.

Modal does not show or close with smooth animations, it just appears/disappears instantly.

The modal's visibility is being controlled with `v-if` instead of `v-model`, preventing Vue's transition system from hooking into the component's lifecycle for animations.

fix

Change the usage from `<Modal v-if="isShow" ...>` to `<Modal v-model="isShow" ...>`. The `v-model` directive correctly manages the presence of the component in the DOM for transitions.

Upgrade

Version history

1.1.4latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 3 applications.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/hoiheart/vue-universal-modal ↗

packagehttps://www.npmjs.com/package/vue-universal-modal ↗