Installations

npm install @vuesimple/vs-modal

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.20.0

NPM Version

lerna/4.0.0/node@v16.20.0+arm64 (darwin)

Pull Requests

Open

0

Total

11

Closed

0

Merged

11

Issues

Open

0

Total

2

Closed

2

Releases

12

v1.4.6

Updated on May 20, 2022

v1.4.5

Updated on May 20, 2022

v1.4.2

Updated on Mar 22, 2022

v1.4.1

Updated on Mar 11, 2022

v1.4.0

Updated on Oct 07, 2021

v1.3.39

Updated on Sep 11, 2021

View All 12 releases

Languages

3

Vue

JavaScript

HTML

Vue (78.92%)

JavaScript (20.76%)

HTML (0.32%)

Developer

ashwinkshenoy

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

33 Stars

310 Commits

5 Forks

1 Watchers

2 Branches

1 Contributors

Updated on Feb 19, 2025

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

3.0.9

Package Id

@vuesimple/vs-modal@3.0.9

Unpacked Size

58.10 kB

Size

13.56 kB

File Count

13

NPM Version

lerna/4.0.0/node@v16.20.0+arm64 (darwin)

Node Version

16.20.0

Published on

Jan 08, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

5

@vitejs/plugin-vue sass vite vite-plugin-style-inject vue

Vue Simple Modal

🗃 A simple vue modal. Perfect for all your modal/ dialogs scenarios.

A light weight vue plugin built groundup, with importance to accessibility.

forthebadge

📺 Live Demo

Code Sandbox Demo: Link
Code Sandbox: Link

🛠 Install

1npm i @vuesimple/vs-modal

🚀 Usage

1<template>
2  <button size="sm" @click="openModal('modal1')">Basic Modal</button>
3  <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
4
5  <button size="sm" @click="openModal('backdrop-modal')">Basic Modal (with blur backdrop)</button>
6  <vs-modal ref="backdrop-modal" backdropBlur title="Funny, Modal Works 🥳">
7    Wow!! Backdrop is blurred out 🔥
8  </vs-modal>
9</template>
10
11<script>
12  import VsModal from '@vuesimple/vs-modal';
13
14  export default {
15    components: {
16      VsModal,
17    },
18
19    methods: {
20      openModal(ref) {
21        this.$refs[ref].open();
22      },
23
24      closeModal(ref) {
25        this.$refs[ref].close();
26      },
27    },
28  };
29</script>

🌎 CDN

1<script src="https://unpkg.com/@vuesimple/vs-modal@<version>/dist/vs-modal.min.js"></script>

1// Main/Entry file
2app.use(VsModal.plugin);

1<template>
2  <button size="sm" @click="openModal('modal1')">Basic Modal</button>
3  <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
4</template>
5
6<script>
7  export default {
8    methods: {
9      openModal(ref) {
10        this.$refs[ref].open();
11      },
12
13      closeModal(ref) {
14        this.$refs[ref].close();
15      },
16    },
17  };
18</script>

Nuxt.js

Nuxt Demo - Code Sandbox: Link

After installation,

Create a file /plugins/vs-modal.js

1import Vue from 'vue';
2import VsModal from '@vuesimple/vs-modal';
3
4Vue.component('vs-modal', VsModal);

Update nuxt.config.js

1module.exports = {
2  ...
3  plugins: [
4    { src: '~plugins/vs-modal', mode: 'client' }
5    ...
6  ]
7}

In the page/ component

1<template>
2  <button size="sm" @click="openModal('modal1')">Basic Modal</button>
3
4  <client-only>
5    <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from V-Simple-Modal!! </vs-modal>
6  </client-only>
7</template>
8
9<script>
10  export default {
11    methods: {
12      openModal(ref) {
13        this.$refs[ref].open();
14      },
15
16      closeModal(ref) {
17        this.$refs[ref].close();
18      },
19    },
20  };
21</script>

Note

For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
You can also do import VsModal from '@vuesimple/vs-modal' & add in component:{VsModal} and use it within component, without globally installing in plugin folder.

⚙ Props

Name	Type	Default	Description
title	String	Modal title	The modal title (text only). For HTML, use the header slot.
size	String	`m`	The size of the modal. One of `s`, `m`, `l`, `fullscreen`, or `auto`. Setting the size to auto will make the modal's width grow to fit its content.
alignTop	Boolean	false	Whether or not the modal should be vertically aligned to the top of the viewport. When `true`, the modal will be top aligned, instead of vertically centered.
alignTopMargin	Number	60	The modal's distance from the top of the viewport, in pixels. Applies only when the `alignTop` prop is `true`.
role	String	dialog	The ARIA role for the modal (important for accessibility). One of `dialog` or `alertdialog`.
removeHeader	Boolean	false	Whether or not the modal header is removed.
removeCloseButton	Boolean	false	Whether or not the header close button is removed.
preventShift	Boolean	false	Whether or not to add a dummy scrollbar to the modal backdrop to prevent the modal shifting horizontally when the `<body>` scrollbar is hidden. Set to `true` to prevent the modal shift.
dismissible	Boolean	true	Whether or not the modal can be dismissed. Set to false to prevent the user from dismissing the modal. This will also hide the header close button.
dismissOn	String	`backdrop close-button esc`	The type of event or events that will cause the modal to be dismissed. One or more of `backdrop`, `close-button`, or `esc`. Separate multiple events with a space.

🔥 Events

Name	Description
open	Emitted when the modal starts to open. Listen for it using `@open`.
reveal	Emitted when the modal is revealed (i.e. when the transition completes). Listen for it using `@reveal`.
close	Emitted when the modal starts to close. Listen for it using `@close`.
hide	Emitted when the modal close transition completes. Listen for it using `@hide`.

📎 Slots

You can define own item markup via slots:

Name	Description
(default)	Holds the modal body and can contain HTML.
header	Holds the the modal header and can contain HTML.
footer	Holds the the modal footer and can contain HTML.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More