How to use SimpleBar with Livewire?

Question

When using SimpleBar with livewire, at first render it works just fine but after calling any method it stops working but the elements of SimpleBar stay there so I cannot initialize it again like this:

document.addEventListener("livewire:load", () => {
    Livewire.hook('message.processed', () => {
        new SimpleBar(document.getElementById('simplebar'));
    });
});

I am using alpine to initialize SimpleBar like this:

<ul x-data x-init="new SimpleBar($root)" id="simplebar">
...
</ul>

does anyone have experience with this situation?

Answer 1

I was having the same problem. I've fixed in the following way:

<div id="myElement">
 {{ $slot }}
</div>

<script>
var myElement = document.getElementById('screenshot');
var simple = new SimpleBar(myElement, { autoHide:true });
</script>

You need to create a laravel component like above. Next, wrap all content that needs to be rendered with livewire.

<x-my-laravel-component>
@livewire('mylivewirecomponent')
</x-my-laravel-component>

By this way the livewire component is encapsuled and it can be rendered multiple times, i've trying with livewire events and other ways, but i can't found other solution. I hope that it's useful