Is it possible to trigger a Livewire modal component with Bootstrap?

Question

I'm trying to render a modal that gets triggered by a button, so that I can then include payment elements in this modal and allow the user to begin to make payment. However, most Livewire modals I've seen - here, for example - use Livewire events to do the toggling of the model, which both requires adding ugly logic to the view and seems like it would still be slower than anything client-side.

It seems to me like it would be faster to allow Bootstrap to trigger the modal via its own JavaScript (using data-bs-* attributes), and only make use of Livewire when actually loading the content into the modal. Is this approach possible, or do Livewire components have to be loaded via Livewire in order to be populated by it?

You can use `@entangle` to share a property with both, JS and PHP, when you change the value with JS,, it open the modal with JS and send a request to PHP to say that the modal is opening. Example with AlpineJS: https://stackoverflow.com/a/64125282/8068675 — Clément Baconnier, Feb 12 '22 at 08:37
* not sure `@entangle` will work with bootstrap though. In that case you can still interact with Livewire from JS after you have opened the modal: https://laravel-livewire.com/docs/2.x/inline-scripts#accessing-javascript-component-instance — Clément Baconnier, Feb 12 '22 at 09:34

score 0 · Answer 1 · answered Feb 12 '22 at 07:43

Using the LiveWire is logical when you need to exchange information with the server and need to request and respond via HTTP protocol. LiveWire has replaced ajax or something like axios. So it’s better you use a modal bootstrap or any element handled on front and use livewire when you want to do something on the server for example fetch or save data via database. You can use livewire components in any blade as any part of your project.

score 0 · Answer 2 · edited Feb 22 '22 at 21:57

I use tailwind modals, in theory you could use any modal, the only thing is that you put the wire to each input, look at this example

<div class="md:col-span-3">
  <label
    for="class_name"
    class="block text-gray-700 text-sm font-bold mb-2"
  >
    Description:
  </label>
  <textarea
    class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 resize rounded-md shadow-sm block mt-1 w-full"
    id="step_description"
    wire:model.defer="step_description"
  ></textarea>
</div>

Is it possible to trigger a Livewire modal component with Bootstrap?

2 Answers2