How to build a Reusable Vuejs modal component

Modal is one of the essential components in the user interface. It's good to display or receive a response from the user without moving to other pages. I'm going to build a Modal component and reusable in every page.

Modal that we're going to build is a simple modal with static content inside it.

Create a VueJS component

Create a new file in your Vue apps and define them as Vue components. Set the component name in the script section.

Modal.vue

<script>exportdefault{ name:"Modal",};</script>

I'll be using TailwindCSS to style the components.

Let me know if you need any tutorial/guide on building UI with TailwindCSS.

Then, assigned the v-model - modalOpen to the ModalDirection component.

<modal-direction v-model="modalOpen"></modal-direction>

Receive a data from parent - in component

Now, the data has been passed into the component. Let’s edit our component to make sure it well received. We’ll write a prop to accept the data from the directModal - model that we just wrote just now.