VueSimple

Install ​

bash
npm i @vuesimple/vs-modal
npm i @vuesimple/vs-modal

Usage ​

html
<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>
<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 ​

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

TIP

Replace <version> with a version number in the above url.

javascript
// Main/Entry file
app.use(VsModal.plugin);
// Main/Entry file
app.use(VsModal.plugin);
html
<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>
<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

    javascript
    import Vue from 'vue';
import VsModal from '@vuesimple/vs-modal';

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

Vue.component('vs-modal', VsModal);

  • Update nuxt.config.js

    javascript
    module.exports = {
  ...
  plugins: [
    { src: '~plugins/vs-modal', mode: 'client' }
    ...
  ]
}
    module.exports = {
  ...
  plugins: [
    { src: '~plugins/vs-modal', mode: 'client' }
    ...
  ]
}

  • In the page/ component

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

TIP

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

NameTypeDefaultDescription
titleStringModal titleThe modal title (text only). For HTML, use the header slot.
sizeStringmThe 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.
alignTopBooleanfalseWhether 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.
alignTopMarginNumber60The modal's distance from the top of the viewport, in pixels.
Applies only when the alignTop prop is true.
roleStringdialogThe ARIA role for the modal (important for accessibility). One of dialog or alertdialog.
removeHeaderBooleanfalseWhether or not the modal header is removed.
removeCloseButtonBooleanfalseWhether or not the header close button is removed.
preventShiftBooleanfalseWhether 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.
dismissibleBooleantrueWhether 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.
dismissOnStringbackdrop close-button escThe 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 ​

NameDescription
openEmitted when the modal starts to open. Listen for it using @open.
revealEmitted when the modal is revealed (i.e. when the transition completes). Listen for it using @reveal.
closeEmitted when the modal starts to close. Listen for it using @close.
hideEmitted when the modal close transition completes. Listen for it using @hide.

Slots ​

You can define own item markup via #slot-name:

NameDescription
(default)Holds the modal body and can contain HTML.
headerHolds the the modal header and can contain HTML.
footerHolds the the modal footer and can contain HTML.