Creating A Popup in Laravel with InertiaJS and VueJS and Bootstrap 5 for CSS

Step 1: Install Required Packages

The first step is to make sure that you have all the required packages installed in your Laravel application. You need to install the following packages using Composer:

composer require inertiajs/inertia
composer require laravel/ui

You also need to install the npm packages for Vue and Bootstrap 5:

npm install vue bootstrap@next @popperjs/core

Step 2: Setup InertiaJS

Next, you need to set up InertiaJS in your Laravel application. To do this, you need to add the following line to your app/Providers/AppServiceProvider.php file in the register method:

use Inertia\Inertia;

public function register()
{
    Inertia::version(function () {
        return md5_file(public_path('mix-manifest.json'));
    });
}

This will register the InertiaJS service provider and set the version to the md5 hash of the mix-manifest.json file. This ensures that the browser will download a new version of the JavaScript and CSS assets only when they are changed.

Step 3: Create a Vue Component for the Popup