Debug School

rakesh kumar
rakesh kumar

Posted on

How to Reuse One Child Modal Component Across Multiple Parent Components Using Alpine.js Store

Simple Meaning

Suppose you have many parent sections:

Doctor Card
Hospital Card
Booking Table
User Profile
Admin Action Button
Enter fullscreen mode Exit fullscreen mode

Each parent needs the same popup/modal.

Instead of creating separate modals again and again, you create one child modal component and control it globally using Alpine.store().

Why This Topic Is Useful

This is very practical for Laravel Blade projects because many pages need common popups like:

Use Case Example
Delete confirmation “Are you sure you want to delete this doctor?”
View details modal Show doctor, hospital, booking, or user details
Edit popup Open same edit modal with different data
Image preview Open image preview from different cards
Booking action Confirm, cancel, approve, reject booking
Alert modal Show success/error message from different sections

Main Problem Developers Face

Without a shared Alpine store, developers often write duplicate modal code inside every parent component.

Example problem:

<!-- Parent 1 modal -->
<div x-data="{ open: false }">
  ...
</div>

<!-- Parent 2 modal -->
<div x-data="{ open: false }">
  ...
</div>

<!-- Parent 3 modal -->
<div x-data="{ open: false }">
  ...
</div>
Enter fullscreen mode Exit fullscreen mode

This becomes hard to maintain.

If you change modal design, you must update many places.

Better Solution

Use one global store:

<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('modal', {
        open: false,
        title: '',
        message: '',
        data: null,

        show(title, message, data = null) {
            this.title = title;
            this.message = message;
            this.data = data;
            this.open = true;
        },

        close() {
            this.open = false;
            this.title = '';
            this.message = '';
            this.data = null;
        }
    });
});
</script>
Enter fullscreen mode Exit fullscreen mode

Now any parent can open the same modal.

Example Parent Component 1

<button
    @click="$store.modal.show(
        'Delete Doctor',
        'Are you sure you want to delete this doctor?',
        { id: 101, type: 'doctor' }
    )"
    class="px-4 py-2 bg-red-600 text-white rounded-lg">
    Delete Doctor
</button>
Enter fullscreen mode Exit fullscreen mode

Example Parent Component 2

<button
    @click="$store.modal.show(
        'Cancel Booking',
        'Do you want to cancel this booking?',
        { id: 55, type: 'booking' }
    )"
    class="px-4 py-2 bg-yellow-600 text-white rounded-lg">
    Cancel Booking
</button>
Single Reusable Child Modal
<div
    x-data
    x-show="$store.modal.open"
    class="fixed inset-0 flex items-center justify-center bg-black/50 z-50"
    x-cloak>

    <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6">
        <h2 class="text-xl font-bold mb-3" x-text="$store.modal.title"></h2>

        <p class="text-gray-600 mb-5" x-text="$store.modal.message"></p>

        <div class="flex justify-end gap-3">
            <button
                @click="$store.modal.close()"
                class="px-4 py-2 border rounded-lg">
                Cancel
            </button>

            <button
                @click="console.log($store.modal.data)"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg">
                Confirm
            </button>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Blog Structure You Can Write

  1. Introduction

Explain that in Laravel Blade or normal HTML pages, developers often repeat modal code many times. Alpine.store helps manage shared frontend state globally.

  1. What Is a Child Component?

A child component is a reusable UI block, like:

Modal
Popup
Alert box
Confirm dialog
Image preview
Toast notification
Enter fullscreen mode Exit fullscreen mode
  1. What Is a Parent Component?

A parent component is any section that triggers the child component.

Example:

Doctor card opens modal
Booking row opens modal
User table opens modal
Hospital profile opens modal
Enter fullscreen mode Exit fullscreen mode
  1. What Is Alpine.store?

Alpine.store() is used to create global state in Alpine.js. This means multiple components can read and update the same data.

  1. Why Use Alpine.store for Shared Modal?

Because it gives:

Advantage Benefit
One modal code No duplicate popup HTML
Global access Any button can open modal
Cleaner Blade files Less repeated frontend code
Easy maintenance Update design in one place
Dynamic data support Send title, message, ID, type, status
Better structure Parent handles trigger, child handles UI

Real Laravel Use Case

Example:

@foreach($doctors as $doctor)
    <button
        @click="$store.modal.show(
            'View Doctor',
            'Doctor: {{ $doctor->name }}',
            { id: '{{ $doctor->id }}', type: 'doctor' }
        )">
        View
    </button>
@endforeach
Enter fullscreen mode Exit fullscreen mode

One modal can display data from many doctors.

  1. Best Practices

Use Alpine.store when the same component is needed by many sections. Keep modal UI separate. Pass only required data like ID, title, message, type, and action. Avoid putting heavy business logic directly inside Alpine. For Laravel actions like delete/update, call backend routes or APIs safely.

Parent component imports JS
Child modal component stays separate
Global state is managed through Alpine.store()
Same child component can be reused from multiple parent components

reuse

Top comments (0)