Plugins stop working with SPA/Vue application

[evici]

I did notice that since Preline v2.0.0 dropdowns (or realy any other JS functionality) stops working when navigating between app pages.

What happens:

1. I install Preline using documentation (tried different methods, different frameworks):

• https://preline.co/docs/frameworks-laravel.html
• https://preline.co/docs/frameworks-vuejs.html
• also tried with Nuxt and Splade, InertiaJS

Please note, that i have tried including <script src="./node_modules/preline/dist/preline.js"></script>

2. Applied "Navbar" from https://preline.co/examples/navigations-navbars.html and navbar works when using links. However when using Vue/Nuxt/Splade/InertiaJS to have benefit of SPA i must use component to navigate between pages. So when i use instead of - on click dropdows stop working intil hard refresh (F5).
3. After hard refresh dropdown starts working again UNTIL i click on Link again - this means DOM rerender in SPA.

In v1.9.0 plugins work fine, but v2.0.0 has this issue.

Screen.Recording.2023-11-14.at.10.00.17.mov

How do i solve this?

[leticiacareli]

I have the same problem

[ShaungBhone]

I have the same problem here.

[mani-hash]

Did you find any solution? Initially I assumed it was something to do with my installation or vite bundling but seems like preline doesn't work unless I do a manual refresh in my SPA

[ShaungBhone]

No, I made another option.

[mani-hash]

I am facing the same issue with laravel 10.x and livewire 3.x. When using wire:navigate, preline stops working!!

[MuriloAkita]

So, I had the same issue with another library. I found the solution by restarting the library each time the navigate or navigation event is triggered in Livewire with an init() function. However, I couldn't find this function or anything similar here in preline. I believe it might be automatic.

[evici]

Now it's better explained in implementation documents. Works fine.

[MuriloAkita]

Yes, I followed all the Laravel documentation. However, when calling the navigate function in Livewire, the preline JavaScript stops working. Perhaps I'll open a topic explaining this to see if someone has a solution.

[evici]

Try following Livewire's hook

document.addEventListener('livewire:navigated', () => {
HSStaticMethods.autoInit();
})

or some similar variation

https://livewire.laravel.com/docs/navigate

[MuriloAkita]

Nice, this worked for me! However, some JavaScript still doesn't work, like the theme change, but it already solved a lot. Thanks :)