vue-smooth-modal v0.0.5

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

Emits

Slots