Dealing with flowbite js driven components and View Transitions in Astro

[jcf0419]

Is your feature request related to a problem? Please describe. I ran into a hang up when using the sidenav component that requires the flowbite js script. Whenever I look to utilize view transitions in astro via "" it seems like the vent listeners that are tied to by button to toggle the sidenav are removed.

In summary I click an a tag in the nav and the slot loads the page - but then the sidenav menu does not come back up with clicking the button that triggers it.

Describe the solution you'd like Ideally some research/documentation how this should be handled would be great! View transitions really add polish to static apps and I'd love to use them with a mature framework like flowbite.

Describe alternatives you've considered I was not able to find a simple solution - so I've abandoned using View Transitions - but that didn't stop me from considering looking at other tailwind component libraries that might handle the new feature.

[lukas5450]

After dedicating a substantial 7 hours of rigorous problem-solving, I have successfully identified a solution that I believe will be of significant benefit to fellow developers encountering a similar challenge.

The key to resolving this issue was to incorporate the following code snippet within the main.layout.astro file, strategically positioned outside the tag:

<script>
    import "flowbite";
</script>
<script>
    document.addEventListener('astro:after-swap', () => {
        // Importing the Flowbite library
        import("flowbite").then((flowbite) => {
            // Initiating Flowbite
            flowbite.initFlowbite()
            console.log("Flowbite loaded");
        });
    });
</script>

This solution centers around the dynamic import and initialization of Flowbite. By implementing this code, I was able to overcome the issue.

Should you require further elucidation or experience any hurdles while implementing this solution, I am at your disposal to provide guidance and answer any inquiries.

[zoltanszogyenyi]

Thanks @jcf0419 and @lukas5450 for reporting and finding a solution!

[sh1man]

When will you release a release with this fix. I also faced this problem and broke my head es6

<script>
    import * as flowbiteModule from "flowbite";
    document.addEventListener('astro:after-swap', () => (
        flowbiteModule.initFlowbite()
    ));
</script>