vue-lightweight-modal v1.0.6

Super Lightweight Modal Nuxt & Vue

A Nuxt / Vue JS Modal, no dependency, no BS.

💥 Installation

NPM:

npm i vue-lightweight-modal

Yarn:

yarn add vue-lightweight-modal

🍭 Usage

In Component

import Modal from 'vue-lightweight-modal'

export default {
  components: {
    Modal,
  },
}

🍿 Props

🍾 Example

💬 Regular Usage:

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <Modal
      :show="showModal"
      title="Hello World"
      :radius="6"
      @close="showModal = false"
    >
      <h2>Some Content</h2>
      <p>Add whatever you want</p>
    </Modal>
  </div>
</template>
<script>
import Modal from 'vue-lightweight-modal'

export default {
  data() {
    return {
      showModal: false,
    }
  },
  components: {
    Modal,
  },
}
</script>

🎥 Embed Video (iframe):

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <Modal
      :show="showModal"
      :video="true"
      title="Hello World"
      :radius="6"
      @close="showModal = false"
    >
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/JltjT4UaxbY"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </Modal>
  </div>
</template>
<script>
import Modal from 'vue-lightweight-modal'

export default {
  data() {
    return {
      showModal: false,
    }
  },
  components: {
    Modal,
  },
}
</script>