Creating A Popup/Modal With Laravel Livewire And No jQuery

Hello everybody !

Today we will create a modal with Laravel Livewire and without jQuery, actually without javascript at all. How cool is Livewire?

We will use Laravel 8 and Bootstrap 4, but feel free to use whatever CSS Framework you want, from Tailwind CSS to Bulma… It doesn’t matter. Actually you could just use pure CSS.

First we need to install livewire, you might already have it…

$ composer require livewire/livewire

Now let’s add our Modal Component:

$ php artisan make:livewire Modals/MyExampleModal

If you want to go deeper on how to configure livewire, you should read this tutorial: https://laravel-livewire.com/docs/2.x/quickstart

Now we should have something like this, it might be a little different, but it doesn’t matter:

<?php

namespace App\Http\Livewire\Modals;

use Livewire\Component;

class MyExampleModal extends Component
{

    public function render()
    {
        return view('livewire.modals.my-example-modal');
    }
}

Now let’s open our modal blade file, it should be in resources/views/livewire/modals/my-example-modal.blade.php. This file should just contain an empty div, so let’s copy the modal html from bootstrap. I made a simple modal for now and paste it in the blade file:

<div>
    <div class="modal fade" id="myExampleModal"…