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>

[babul]

I've struggled with this for an embarrassingly long time 😓 The snippet below solves all my problems wiht Flowbite and Astro's View Transitions in Astro 4.14.6, and does not throw warnings or errors during build.

<script is:inline src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>

<script is:inline>
    // this is needed so flowbite js library works with view transitions
    document.addEventListener("astro:after-swap", () => {
        initFlowbite()
    })
</script>