DEV Community

Cover image for How to Build a Modal in Vue.Js

How to Build a Modal in Vue.Js

Luca Spezzano
Frontend developer focused on CSS architecture of scalable and maintainable large scale projects.
・2 min read

A great way to create a simple modal from scratch

Modals are one of the most used components in the UI, we can find them in the most popular CSS frameworks like Bootstrap or libraries of UI components like TailwindUI.

They are useful because in our projects we often want to show messages or we need to allow users to make an action without to change page.

Usually, I used Bootstrap modals on my projects but when I changed job I started to work with Vue.js and TailwindCSS and one of my first tasks was to create a modal component.

So I started some research, I found many examples and packages which were doing that, but these did not cover all the cases, some of the most common problems were:

  • when the modal was very high it was cut
  • when the modal was open, the body of the page was still scrollable
  • they did not give to the parent the possibility to customize the content of the modal
  • they didn’t give explicit methods to trigger some events on the opening and closing actions

Today we are going to build a modal component that should be fine for every need, it will fix the problems above:

  • it will fit the page according to its content and it will become scrollable automatically
  • when the modal is open, the body of the page will not be scrollable
  • the parent will be free to customize the component adding also HTML
  • there are closeModal() and openModal() events that will give you the opportunity to trigger other events.

Check out how to build your modal component on Medium 👇

Ps. In the comments you will find the friends link if you have finished your monthly view on Medium. If you are not happy that the tutorial is on Medium, nobody forces you to read it.
Peace and love

Discussion (1)

93lucasp profile image
Luca Spezzano Author