Modals not working in Laravel Jetstream

karlgray commented 3 years ago

I am new to Laravel, this being my first project so please forgive me if this is obvious I just spent an hour+ figuring this out and thought it may be useful to someone else.

In app.blade.php adding

@livewire('livewire-ui-modal')
@livewireUIScripts

Directly above @livewireScripts doesn't work. Modals will not work.

You have to add it above @stack('modals')

I am not sure why these conflict with each other like this?

sotten commented 3 years ago

Hey @karlgray,

I can't understand their error. I am using Laravel Jetstream with Livewire. Below is the body part of app.blade.php

// resources/views/layouts/app.blade.php

    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')
        @stack('scripts')

        @livewire('livewire-ui-modal')
        @livewireUIScripts
        @livewireScripts
    </body>

Did you run php artisan vendor:publish --tag=livewire-ui:public --force?

You can also alternatively add require('../../vendor/livewire-ui/modal/resources/js/modal'); in resources/js/app.js, instead of @livewireUIScripts. After that you still need to run npm run dev.

// resources/js/app.js

require('./bootstrap');

require('alpinejs');
require('../../vendor/livewire-ui/modal/resources/js/modal');

I hope I could help you.

karlgray commented 3 years ago

I was going to post a response today. I spent last night trying to figure out what was going on... Came back today and tested it was the cause and confirmed.

It turns out that I screwed up. While trying to figure out the modals I had run this command. php artisan livewire:make modals.modal prior to installing livewire-ui/modals.

It was this that was causing the conflict. I have now deleted it (not actually needed) and this resolved the issue.

My apologies for this issue and any time you put into it @sotten

wire-elements / modal

Modals not working in Laravel Jetstream #38