Vuety Modal

Vuety Modal is a modal component library for Vue 3
Soon new features

Installation

npm i vuety-modal

Next step is setting up Vuety configuration.

import {createApp} from 'vue';
import App from './App.vue';
import Vuety from 'vuety-modal/config';
const app = createApp(App);

app.use(Vuety);

Usage

Use modal component

<template>
  <button @click="show = true">open modal</button>
  <Modal v-model:show="show">
    <div class="w-screen sm:w-60 h-screen sm:h-60 bg-white sm:m-auto flex flex-col items-center justify-center p-8">
      <div>Modal content</div>
      <button @click="show = false">close</button>
    </div>
  </Modal>
</template>
<script setup>
import { ref } from "vue";
import Modal from "vuety-modal/modal"

const show = ref(false);
</script>

Events

Event	Type	Description
@open	Callback	Callback to invoke when modal is showed.
@close	Callback	Callback to invoke when modal is hidden.