@vuesimple/vs-modal

3.0.6 • Public • Published

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.

npm npm

forthebadge forthebadge forthebadge forthebadge forthebadge forthebadge


📺 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 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

  • 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.

Package Sidebar

Install

npm i @vuesimple/vs-modal

Weekly Downloads

151

Version

3.0.6

License

MIT

Unpacked Size

59.5 kB

Total Files

13

Last publish

Collaborators

  • ashwinkshenoy