Vue 3 Quickstart

// Web Development //

Popup Modal Component in Vue 3

by Dillon - Updated -

In this post, I’m going to show you how to create a Popup Modal Component in Vue.js. This Popup Modal will use the built-in transition component. The Modal we will create looks a lot like the Modal Alerts used by Apple in iOS. We will use Tailwind CSS for styling.

I have created a repository with this functionality included here: https://github.com/Dillonsmart/vue-quickstart. The repository includes other functionality, such as state management and persisted data.

Vue 3 Modal Popup

Create a Popup Modal Component in Vue

First, under the components directory, create a new file called TheModalComponent.vue. This component is where we write all the code for the Modal in Vue. The component contains the HTML markup used in the template, with scoped CSS.

<template>
    <div>
        <div class="h-full w-full fixed top-0 left-0 z-20" v-on:click="hide"></div>
        <div class="bg-white rounded-lg text-lg pt-6 shadow-lg w-96 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30">
            <div class="px-6 pb-6 text-center">
                <h3 class="text-xl mb-2 font-semibold">Your Options</h3>
                <p class="text-gray-600 font-light">What action would you like to perform?</p>
            </div>
            <ul class="cursor-pointer border-t border-gray-100 text-center">
                <li class="border-b text-blue-500 border-gray-100 w-full px-6 py-3 hover:bg-gray-100">Option 1</li>
                <li class="border-b text-blue-500 border-gray-100 w-full px-6 py-3 hover:bg-gray-100">Option 2</li>
                <li class="w-full text-red-500 px-6 py-3 rounded-b-lg hover:bg-gray-100">Delete</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "TheModalComponent",
    methods: {
        hide() {
            console.log('click registered');
            this.$emit('close')
        }
    }
}
</script>

<style scoped>
.bounce-enter-active {
    animation: bounce-in .5s ease-out both;
}

.bounce-leave-active {
    animation: bounce-in .5s reverse ease-in both;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.10);
    }
    100% {
        transform: scale(1);
    }
}
</style>

Use the Component in another Component

To use the Popup Modal Component in your Views or other Components, call it using the name of the component split by hyphens. To use the transition bounce, wrap the component in the transition component like so:

<transition name="bounce" mode="out-in">
    <the-modal-component></the-modal-component>
</transition>

Related Posts

Dillon Smart

👋 Hey, I'm Dillon!

I'm a Full Stack developer from the U.K. I've been building websites and applications for 11 years! Along the way I've picked up a few things, and share them here on IKnowThatNow.com.

Feel free to reach out on Twitter!

0 Comment

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.