@vuesimple/vs-modal
Advanced tools
A simple vue modal. Perfect for all your modal/ dialogs scenarios.
A light weight vue plugin built groundup, with importance to accessibility.
Code Sandbox Demo: Link
Code Sandbox: Link
npm i @vuesimple/vs-modal
<template>
<button size="sm" @click="openModal('modal1')">Basic Modal</button>
<vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
<button size="sm" @click="openModal('backdrop-modal')">Basic Modal (with blur backdrop)</button>
<vs-modal ref="backdrop-modal" backdropBlur title="Funny, Modal Works 🥳">
Wow!! Backdrop is blurred out 🔥
</vs-modal>
</template>
<script>
import VsModal from '@vuesimple/vs-modal';
export default {
components: {
VsModal,
},
methods: {
openModal(ref) {
this.$refs[ref].open();
},
closeModal(ref) {
this.$refs[ref].close();
},
},
};
</script>
<script src="https://unpkg.com/@vuesimple/vs-modal@<version>/dist/vs-modal.min.js"></script>
// Main/Entry file
app.use(VsModal.plugin);
<template>
<button size="sm" @click="openModal('modal1')">Basic Modal</button>
<vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
</template>
<script>
export default {
methods: {
openModal(ref) {
this.$refs[ref].open();
},
closeModal(ref) {
this.$refs[ref].close();
},
},
};
</script>
Nuxt.js
Nuxt Demo - Code Sandbox: Link
After installation,
Create a file /plugins/vs-modal.js
import Vue from 'vue';
import VsModal from '@vuesimple/vs-modal';
Vue.component('vs-modal', VsModal);
Update nuxt.config.js
module.exports = {
...
plugins: [
{ src: '~plugins/vs-modal', mode: 'client' }
...
]
}
In the page/ component
<template>
<button size="sm" @click="openModal('modal1')">Basic Modal</button>
<client-only>
<vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from V-Simple-Modal!! </vs-modal>
</client-only>
</template>
<script>
export default {
methods: {
openModal(ref) {
this.$refs[ref].open();
},
closeModal(ref) {
this.$refs[ref].close();
},
},
};
</script>
Note
<no-ssr>...</no-ssr> tag.import VsModal from '@vuesimple/vs-modal'
& add in component:{VsModal} and use it within component, without globally installing in plugin folder.| 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. |
| 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. |
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. |
FAQs
A simple vue modal. Perfect for all your modal/ dialogs scenarios.
We found that @vuesimple/vs-modal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.