flowbite: Flowbite js plugin does not work in Vue 3
What happened
There seems to be an issue when using the flowbite plugin package in Vue apps or specifically in this case, a Vue 3 app. Components such as dropdowns and modals just won’t work. I made sure to add and import the necessary lines in both the tailwind config and main.js file. Refreshing the browser and restarting the app using npm run dev fails to fix issue. When hovering over the plugin in the tailwind config file it gives the following warning
This issue was posted on stackoverflow but the only slightly helpful answer I found was to link flowbite using unpkg which I do not find particularly ideal as it does not fully solve the problem.
Desktop
- OS: Win10
- Brave, Chromium browser
Addendum: The same issue occurs when tested in an Incognito window and in Firefox. Clearing the cache also doesn’t do anything
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 15 (3 by maintainers)
Hey peeps,
We’re super close to launching Flowbite v1.6.0 which will support Vue 3 programatically.
Here’s a starter repo using a temporary release: https://github.com/themesberg/flowbite-vue-starter
@hurradieweltgehtunter
I think this happens because the Flowbite JS only runs once on DOM ready, and elements like a button to trigger a modal might not yet exist at that point.
For now I’ve done this in a Vue component which makes it work, but it’s hacky:
I fixed this problem by adding “import flowbite” in the main.js file
Hello everyone,
The v1.6.0 is out and there’s a new setup guide and the Flowbite Vue starter as well: https://flowbite.com/docs/getting-started/vue/
Cheers, Zoltan