Vue 3 Popup Modal Component – Create a Modal

· JavaScript · Vue

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: 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.

        <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>
            <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>

export default {
    name: "TheModalComponent",
    methods: {
        hide() {
            console.log('click registered');

<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);

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">


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.


0 Comment

Was this helpful? Leave a comment!

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

Related Posts

What is a front-end application?

Updated 16th August 2022

Front-end web development meme

What is a front-end application? If you’re new to Web Development, there may be many terms you hear that you’re unsure what they mean. Don’t worry, this is all part of the learning experience and you will pick these terms up as you progress in your journey to becoming a web developer. In this post,

List of programming languages used for Web Development

Updated 16th August 2022

programming languages used for web development

There are a wide variety of programming languages that can be used for web development. Which one you choose depends on your preferences and needs. Some languages are better suited for certain tasks than others. In this post, we’ll take a look at some of the most popular languages used for web development. JavaScript PHP

How to access Laravel env variables in Vue.js | Laravel MIX

Updated 16th August 2022

Using Laravel and Vue together is a common approach as it allows the MVC framework to handle the logic, and an application-like user interface for the frontend. Learn how to use Laravel environment variables in Vue.js. MIX Environment Varaibles Vue js files are compiled by Laravel Mix. To have Mix compile your environment variables from