How to use it with bootstrap?

[jackzdev]

According to documentation we need to run this command php artisan vendor:publish --tag=livewire-ui-modal-views
to publish modal blade file and make some changes there, but I'm not sure what to change

[dens4t]

any progress for documented in bootstrap style?

[eazyurk]

You can try something like this in your modal.blade.php for a bootstrap modal:

    @isset($jsPath)
        <script>{!! file_get_contents($jsPath) !!}</script>
    @endisset
    @isset($cssPath)
        <style>{!! file_get_contents($cssPath) !!}</style>
    @endisset

        <div x-data="LivewireUIModal()"
             x-init="init()"
             x-on:close.stop="setShowPropertyTo(false)"
             x-on:keydown.escape.window="closeModalOnEscape()"
             x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
             x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
             x-show="show"
        >
            <div
                 class="modal fade show"
                 style="display: block;"
                 aria-modal="true"
                 role="dialog"
                 tabindex="-1"
            >
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Modal title</h5>
                            <button type="button" x-on:click="closeModal()" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div
                            x-show="show && showActiveComponent"
                            x-transition:enter="ease-out duration-300"
                            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                            x-transition:leave="ease-in duration-200"
                            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

                            class="modal-body"
                            id="modal-container"
                        >
                            @forelse($components as $id => $component)
                                <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                                    @livewire($component['name'], $component['attributes'], key($id))
                                </div>
                            @empty
                            @endforelse
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Test</button>
                            <button type="button" class="btn btn-primary">Test</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[PhiloNL]

There is a Pro version of Wire Elements that will also support Bootstrap if you don't want to change the template. You can join the waiting list here.

[digitall-it]

I am considering the Pro version of Wire Elements, but before buying it I wanted to check out the open source, free Modal that @PhiloNL kindly offers. The Pro version has also other components and more seem to be on the way. If you still want to use bootstrap, the code above misses something. Try this:

<div>
    @isset($jsPath)
        <script>{!! file_get_contents($jsPath) !!}</script>
    @endisset
    @isset($cssPath)
        <style>{!! file_get_contents($cssPath) !!}</style>
    @endisset

    <div x-data="LivewireUIModal()"
         x-init="init()"
         x-on:close.stop="setShowPropertyTo(false)"
         x-on:keydown.escape.window="closeModalOnEscape()"
         x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
         x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
         x-show="show"
    >
        <div
                class="modal fade show"
                style="display: block;"
                aria-modal="true"
                role="dialog"
                tabindex="-1"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" x-on:click="closeModal()" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div
                            x-show="show && showActiveComponent"
                            x-transition:enter="ease-out duration-300"
                            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                            x-transition:leave="ease-in duration-200"
                            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

                            class="modal-body"
                            id="modal-container"
                    >
                        @forelse($components as $id => $component)
                            <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                                @livewire($component['name'], $component['attributes'], key($id))
                            </div>
                        @empty
                        @endforelse
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Test</button>
                        <button type="button" class="btn btn-primary">Test</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[26kito]

Where do I put this code to?

[noge075]

Maybe you can try something like this to trigger the default modal methods (Bootstrap 4 for exmaple).
In this case you have backdrop and close on click away.

<div>
    @isset($jsPath)
        <script>{!! file_get_contents($jsPath) !!}</script>
    @endisset
    @isset($cssPath)
        <style>{!! file_get_contents($cssPath) !!}</style>
    @endisset

    <div
            x-data="LivewireUIModal()"
            x-init="
            init();
            $watch('show', (show) => {
                if(show){
                    $($refs.livewireModal).modal('show');
                    return;
                }

                $($refs.livewireModal).modal('hide')
            });
            "
            x-on:close.stop="setShowPropertyTo(false)"
            x-on:keydown.escape.window="closeModalOnEscape()"
            x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
            x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
            x-ref="livewireModal"
            class="modal fade"
    >
        <div class="modal-dialog" role="document" id="modal-container" x-on:click.away="closeModalOnClickAway()">
            <div class="modal-content"  >
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" x-on:click="closeModalOnClickAway()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @forelse($components as $id => $component)
                        <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                            @livewire($component['name'], $component['attributes'], key($id))
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

[andreasbvillumsen]

How would it be possible to pass a title and modal size for this example?

[MDylan]

How would it be possible to pass a title and modal size for this example?

Just put this into the modal blade view file:
<script> $("#exampleModalLabel").html('Modal Title'); </script>