0.1.11 • Published 2 years ago
vuety-modal v0.1.11
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. |