Vue 3 Smooth Modal

Vue 3 Smooth Modal is~ a modal window package designed for Vue 3 that provides exceptionally smooth transitions for showing and hiding modals. Its focus is on delivering a seamless user experience, with fluid animations and effortless integration into any Vue 3 project. This package simplifies the process of managing modals, ensuring both visual appeal and high performance

Demo

Installation

npm i vue-smooth-modal

Vue 3

Add dependencies to your main.js:

import { createApp } from 'vue'

import "vue-smooth-modal/dist/style.css"
import SmoothModal from "vue-smooth-modal"
// ...
app.use(SmoothModal)

Nuxt 3

Create ./plugins/vue-smooth-modal.js

import "vue-smooth-modal/dist/style.css"
import SmoothModal from "vue-smooth-modal"

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(SmoothModal)
})

Usage

<script setup>
    import { ref } from 'vue'

    const show = ref(false)
    const reModal = ref(null)
    // reModal.value.close()

    const onClose = () => console.log("close")
</script>

<template>
    <SmoothModal v-model="show" ref="reModal" :use-skeleton="true" @close="onClose" class="custom-background">
        <p>
            This is an example of displaying text in a modal window
        </p>
    </SmoothModal>

    <a href="#" @click.prevent="show = true">Toggle</a>
</template>

<style>
    .custom-background {
        --tvbird-modal-overlay: rgb(239 192 222 / 25%);
    }
</style>

Props

| Attribute | Type | Default | Description | |:---------------|:-------:|:-------------:|:---------------------------------------------------------------------------| | duration | Number | 700 | show and hide duration | | easing | String | ease-in-out | easing |
| showClose | Boolean | true | Display the modal close icon | | closeOnEsc | Boolean | true | Close the modal by pressing the Esc key | | closeOnOverlay | Boolean | true | Close the modal by clicking on the overlay | | isImage | Boolean | false | Image inside. Image preloading with an SVG preloader | | useSkeleton | Boolean | false | Use a CSS template |

Emits

| Event | Description | |:--------|:------------------------------------------| | close | Triggered when the modal window is closed |

Slots

| slot name | description | |:------------|:--------------------| | close | Custom close button | | preloader | Custom preloader |