How to Build a Modal in Vue.Js

A great way to create a simple modal from scratch

Vue.js simple modal

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…