Taha Shashtari has written a nice tutorial about creating a reusable modal box in Laravel and VueJS.

Introduction

At some point or another, you'll need to display some modal box in your application. Either for a login form or to edit something or anything else.

So I thought it would be really nice if I can create a reusable component that lets us add as many modal boxes as we want.

But it wasn't as easy as I thought, though. There were some issues that I needed to solve in order to get a fully working reusable modal. And luckily I was able!

In this tutorial, I'd like to show you how you can build a reusable component for creating and displaying modal boxes with any content you want. Also, at the end of the tutorial I'm going to show you how to use any animation you want for the transitioning.

![Modal Box Demo][1]

Preparing the environment

For this tutorial, we'll do all of our work in welcome.blade.php. So jump to it and replace everything with this.

<!DOCTYPE html>
<html>
    <head>
        <title>Modal Boxes</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100"

rel="stylesheet" type="text/css">

    </head>
    <body id="app">
        <div class="container">
            <div class="content">
                <a href="#" @click="showModal" class="naked-link title">Show Modal</a>
            </div>
        </div>