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.
📺 Live Demo
Code Sandbox Demo: Link
Code Sandbox: Link
🛠 Install
npm i @vuesimple/vs-modal🚀 Usage
<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>🌎 CDN
<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.js
Nuxt Demo - Code Sandbox: Link
After installation,
-
Create a file
/plugins/vs-modal.jsimport Vue from 'vue'; import VsModal from '@vuesimple/vs-modal'; Vue.component('vs-modal', VsModal);
-
Update
nuxt.config.jsmodule.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
- For older Nuxt versions, use
<no-ssr>...</no-ssr>tag. - You can also do
import VsModal from '@vuesimple/vs-modal'& add incomponent:{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. |