Today, I would like to teach you guys how to build a reusable Vue modal but with some advanced features.

What we’re going to build is a reusable modal component with multiple support.

• Component-based
• Render in the root DOM
• Using slot to render the content
• An option to add a scrollable content
• Press escape key to exit the modal
• Animation transition

Let’s dive into how to build it.

Build a template HTML/CSS

First of all, let’s create a new file for our modal component and called it BaseModal.vue

Since, I’ve prepared some template to work on in HTML and CSS, Let’s add it on our modal component and render it in our page.

#vue #vuejs #web-development #javascript