Vue 3 Popup Modal Component – Create a Modal

By Dillon Smart · · · 0 Comments

Vue 3 Quickstart

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

What is Vue? 

Vue is a JavaScript framework for building user interfaces. It provides a declarative and component-based programming model which is great for user interfaces both simple and complex. 

Vue has been raising in popularity since its release in 2014, and is now in the top 3 JavaScript frameworks alongside Angular and React. 

Vue 3 Modal Example

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 3

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>

Summary

You have now successfully created a Vue3 modal!

Vue js ships with many useful features for frontend developers. Using transitions in Vue, we have built a modal popup that looks and feels like native modal dialogs on iOS devices.

If you need any help creating a Vue 3 Popup Modal Component, feel free to leave a comment.

Do you use Vue in your Laravel Application? Learn how to use environment variables in Vue.

JavaScriptVue

0 Comment

Was this helpful? Leave a comment!

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

Destructuring in JavaScript

Updated 16th August 2022

Introduced in ES6, Destructuring in JavaScript is a way to unpack values from arrays, or properties from objects, into distinct variables. What is a use-case of Destructuring in JavaScript? Until ES6, if we wanted to extract data from an array we would have to do something similar to: let message = ; let greeting

Angular Material Dialog

Updated 16th August 2022

Angular is an awesome framework, yet it does have a steep learning curve for many developers. This post is aimed at those with experience using Angular 2/4/5 who want to use the Angular Material Dialog. This post will assume you have already installed the @angular/material library. If you have I would refer you to take

JavaScript Spread & Rest Operators

Updated 28th July 2022

In JavaScript, three dots ( … ) are used for both the Spread and Rest operators. Spread and Rest perform different actions. Let’s learn what the JavaScript Spread & Rest Operators do. JavaScript Spread Operator The JavaScript Spread Operator ( … ) allows us to copy and split an Array or Object into another Array