V-simple-modal NPM

V-Simple-Modal

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

📺 Live Demo

CodeSandbox Code: Link CodeSandbox Demo: Link

🛠 Install

npm i v-simple-modal

yarn add v-simple-modal

🚀 Usage

<template>
  <button size="sm" @click="openModal('modal1')">Basic Modal</button>
  <v-simple-modal ref="modal1" title="Funny, Modal Works 🥳">
    Hello Peeps from V-Simple-Modal!!
  </v-simple-modal>

  <button size="sm" @click="openModal('backdrop-modal')">Basic Modal (with blur backdrop)</button>
  <v-simple-modal ref="backdrop-modal" backdropBlur title="Funny, Modal Works 🥳">
    Wow!! Backdrop is blurred out 🔥
  </v-simple-modal>
</template>

<script>
  import VSimpleModal from 'v-simple-modal';

  export default {
    components: {
      VSimpleModal,
    },

    methods: {
      openModal(ref) {
        this.$refs[ref].open();
      },

      closeModal(ref) {
        this.$refs[ref].close();
      },
    },
  };
</script>

Nuxt.js

After installation,

Create a file /plugins/v-simple.modal.js

import Vue from 'vue';
import VSimpleModal from 'v-simple-modal';

Vue.component('v-simple-modal', VSimpleModal);

Update nuxt.config.js

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

In the page/ component

<client-only>
  <v-simple-modal ref="modal1" title="Funny, Modal Works 🥳">
    Hello Peeps from V-Simple-Modal!!
  </v-simple-modal>
</client-only>

Note For older Nuxt versions, use <no-ssr>...</no-ssr> tag

⚙ Props

Name	Type	Default	Description
title	String	Ms 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.

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

🔥 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`.