Hi There 😊

In this article, we will build a custom modal component with Nuxt.js. We will build this Modal component from scratch without using any CSS framework.

Introduction

First, we must understand what a Modal is.

A modal is a component that displays in front of a page content and makes the page content inaccessible till it is closed. To return to the main content, the user must engage with the modal by completing an action or by closing it. Modals are often used to direct users’ attention to an important action or piece of information on a website or application.

If you are a frontend developer, I think you should know that modals are ubiquitous UI elements on the web.

Prerequisites

To complete this tutorial, you will need:

• A basic understanding of Vue or Nuxt before starting this tutorial.

We are going to implement the modal component shown above in our Nuxt project through the following steps.

1. Creating a modal component
2. Add styling
3. Handle show/hide modal
4. Implement the Close event
5. Close modal by clicking outside the modal

Based on the requirement of understanding of Vue or Nuxt which I made mention of above, I’m assuming that we are familiar with how to create a Nuxt app and basic styling with CSS.

Let's get started

1. Creating our modal component.

Basically, we would be working on what is important to this article and that is implementing the modal, so we won't be styling the main page.

Let's start by creating our modal component on/components/SavedModal.vue that is, we are creatingSavedModal.vue inside thecomponents folder.

Here we have our code forSavedModal.vue

<template><divclass="modal-overlay"><divclass="modal"><imgclass="check"src="~/assets/check-icon.png"alt=""/><h6>Saved!</h6><p>Your Details have been saved Successfully</p><button>Go Home</button></div><divclass="close"><imgclass="close-img"src="~/assets/close-icon.svg"alt=""/></div></div></template><script>exportdefault{}</script>

Code explanation

A class of modal-overlay i.eclass="modal-overlay" was given to the root div which acts as the background overlay when the modal appears.
Then a class of modal i.eclass="modal" was given to the second div element after the root element. This acts as the main modal.

2. Adding Style to our code.

<stylescoped>.modal-overlay{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;background-color:#000000da;}.modal{text-align:center;background-color:white;height:500px;width:500px;margin-top:10%;padding:60px0;border-radius:20px;}.close{margin:10%0016px;cursor:pointer;}.close-img{width:25px;}.check{width:150px;}h6{font-weight:500;font-size:28px;margin:20px0;}p{font-size:16px;margin:20px0;}button{background-color:#ac003e;width:150px;height:40px;color:white;font-size:14px;border-radius:16px;margin-top:50px;}</style>

3. Handle show/hide modal

To make our modal show, we are going to work on the main page which isindex.vue.

We won't be implementing the whole page, but only the sections important to our aim, which is to make the modal function well

Here we have our code forindex.vue

First, let's import our modal component toindex.vue.

</div></div><SavedModalv-show="showModal"/></div></template><script>importSavedModalfrom'~/components/SavedModal.vue'exportdefault{components:{SavedModal},data(){return{showModal:false,}},}</script>

What did we do up here?

We imported the SaveModal component and then added av-show directive with a data property ofshowModal to conditionally display the<SavedModal/>element. i.ev-show="showModal".

Then we returned the data property ofshowModal with a value offalse.
This means<SavedModal /> modal would only display if the returned value becomestrue.

Let's now work on how to change the returned value fromfalse totrue

We would be adding an@click event to the Save button which would change the returned value fromfalse totrue and would trigger the modal to appear.

<divclass="save-btn"><button@click="showModal = true">Save</button></div>

In the code above we madeshowModal have a value oftrue and added it to the@click event.
This means anytime the Save button is clicked the@clicked event changesshowModal's value fromfalse totrue and triggers the modal to appear.

Now that our modal can appear when the save button is clicked, let's go to the next step.

4. Implementing the Close event

We would be modifyingSavedModal.vue to implement the close event.

<template><divclass="modal-overlay"><divclass="modal"><imgclass="check"src="~/assets/check-icon.png"alt=""/><h6>Saved!</h6><p>Your Details have been saved Successfully</p><button>Go Home</button></div><divclass="close"@click="$emit('close-modal')"><imgclass="close-img"src="~/assets/close-icon.svg"alt=""/></div></div></template>

Why did we add@click="$emit('close-modal')" to the close button?

We added an@click event which sends a'close-modal' event using$emit to the parent component which is theindex.vue page.

$emit in Vue is primarily used for sending custom events between child components upwards to parent components.

Since we are sending a'close-modal' event to the modal element on theindex.vue page, we would also need to modify it, to make our close button function the way it should.

</div></div><SavedModalv-show="showModal"@close-modal="showModal = false"/></div></template>

Since'close-modal' is a custom event sent from the@click event on the child component which is theSavedModal.vue page, it automatically acts as an@click event here on the parent component (index.vue page).

So we madeshowModal have a value offalse and added it to the@close-modal event.

Therefore when the close button is clicked on theSavedModal.vue page, it sends an event to theindex.vue page that triggers the@close-modal event which changesshowModal's value fromtrue tofalse and makes the modal to close.

Now to the last step

5. Close modal by clicking outside the modal

We would be modifying theSavedModal.vue page to also implement this.

<template><divclass="modal-overlay"@click="$emit('close-modal')"><divclass="modal"@click.stop><imgclass="check"src="~/assets/check-icon.png"alt=""/><h6>Saved!</h6><p>Your Details have been saved Successfully</p><button>Go Home</button></div><divclass="close"@click="$emit('close-modal')"><imgclass="close-img"src="~/assets/close-icon.svg"alt=""/></div></div></template>

We added@click="$emit('close-modal')" to the root div with the class ofclass="modal-overlay" so as to trigger the close event when the overlay is clicked.

When@click="$emit('close-modal')" is added to the root div, every other element inside the root div would be affected by the event. So we added@click.stop to the div withclass="modal" class to stop the event from affecting it or any other element inside the div.

Here is a visual of our result.

So we've achieved our aim which was creating a modal component and making it function the way it should.

I hope this article gives a clear understanding of how modals function and how to implement them.

Here is a link to the complete codehttps://github.com/Emodot/Creating-Modal-Components

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me onTwitter and onLinkedin

Thanks for Reading!!! 😊