Artsie's Notebook

How To Communicate with Laravel Breeze's Modal Component Between App Layout Slots

2 min read

This took me embarrassingly long to figure out. In part, because I’m still learning Laravel and its components and in part because everyone told me that it was impossible to communicate between different slots in a layout file.

It turns out, you can. Here’s an example of a file using the default Laravel Breeze app layout:

<x-app-layout>
    <x-slot:header>
        <div class="flex">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                    {{ 'Publish' }}
                </h2>
            </div>
            <div class="ml-auto">
                <x-primary-button x-data=""
                    x-on:click="$dispatch('open-modal', 'create-post')">
	                    {{ 'Create Post' }}
                    </x-primary-button>
            </div>
        </div>
 
    </x-slot:header>
 
    <div class="py-12">
        <x-modal name="create-post">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900 dark:text-gray-100">
                        <livewire:posts.create rows="18" />
                    </div>
                </div>
            </div>
        </x-modal>
    </div> 
 
</x-app-layout>

It turns out, to open a modal, you just need to create a data object in header slot, and call the $dispatch('open-modal', $yourModalName) method. Then everything else should just work.

Graph View