VueJS + Tailwind Basic Modal in 5 mins

Modals can be used for various purposes right from showing instructions with a pop-up or getting some form inputs. I will be building a modal that you can use for any sort of purpose and using any type of modal from instructions to form input collection.

We will use VueJS and TailwindCSS for this purpose. Also if you suck at creating styles just go and grab a modal style from here.

I have grabbed this as I want to make a pop-up instruction as soon as the DOM is ready. Let's grab the code!

<style>
  dialog[open] {
  animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8);
}

  dialog::backdrop {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(54, 54, 54, 0.5));
    backdrop-filter: blur(3px);
  }


@keyframes appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
} 
</style>

<dialog id="myModal" class="h-auto w-11/12 md:w-1/2 p-5  bg-white rounded-md ">

   <div class="flex flex-col w-full h-auto ">
        <!-- Header -->
        <div class="flex w-full h-auto justify-center items-center">
          <div class="flex w-10/12 h-auto py-3 justify-center items-center text-2xl font-bold">
                Modal Header
          </div>
          <div onclick="document.getElementById('myModal').close();" class="flex w-1/12 h-auto justify-center cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </div>
          <!--Header End-->
        </div>
          <!-- Modal Content-->
           <div class="flex w-full h-auto py-10 px-2 justify-center items-center bg-gray-200 rounded text-center text-gray-500">
             This is a text inside the modal. You can add your content here.
          </div>
          <!-- End of Modal Content-->
        </div>
</dialog>

We will not use the button as we don't have to use the button to get the modal content on to the DOM. We will use the VueJS Lifecycle method to do so!

First, let's go through the above code, we are using animation open once it's open we have to set the background and we use backdrop and background to see the blur and background color.

We also use keyframes to show a certain transition in the X direction as when the modal appears on the DOM it has a certain transition of 3rem on the screen.

Now we will use VueJS to show the modal as soon as all the elements have been rendered on the DOM.

var app = new Vue({
    el: '#app',
    mounted() {
        this.openModal();
    },
    methods : {
        openModal: function() {
            document.getElementById('myModal').showModal()
        }
    }
})

You can find the above code on my github. The code is basically using the mounted lifecycle method.

What is mounted? : Basically executes the code once the elements are rendered on the DOM

Other Lifecycle methods : updated, mounted, destroyed, activated. You can see all the API's here

Do share the article if you find it useful! 😍