Flowbite js plugin does not work in Vue 3

[MarcVegas]

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

[pl-jay]

i had the same issue with Flowbite TailwindCSS with Vue 3 Vite project. I thought it's something wrong with OS(Ubuntu 22.04).

[Paddidox]

Same issue for me. I've followed the instructions given on flowbite for vue.

Something that I've noticed, the instruction states: "Configure the template paths inside the tailwind.config.js file:"

The file generated by tailwindcss init -p is tailwind.config.cjs - don't know if this makes any difference.

[pl-jay]

this could help https://github.com/tailwindlabs/tailwindcss-forms/issues/18,

Or this https://stackoverflow.com/questions/72152573/why-my-tailwind-components-library-flowbite-is-not-working

by the way, using CDN worked for me.

[MarcVegas]

this could help tailwindlabs/tailwindcss-forms#18,

Or this https://stackoverflow.com/questions/72152573/why-my-tailwind-components-library-flowbite-is-not-working

by the way, using CDN worked for me.

Thanks for pointing this out. This is not a framework specific issue so I hope this gets fixed soon. For anyone pulling their hair out because of this problem and looking for a solution. Unfortunately, there is no @types/flowbite package published yet at the time of this writing so we can't npm install our way out of this but I found 2 solutions that will hopefully work. Please take note that I assume that you use typescript in your project.

1. Use the unpkg CDN that has the flowbite plugin as @pl-jay has pointed out. I tried this one and it works initially but somehow stops working when used with vue-router. Will update this one if I find a solution
2. Add a globat.d.ts file in the root directory of your project. and add this line declare module 'flowbite/plugin' or declare module './node_modules/flowbite/plugin.js'.

You could also try setting your tsconfig.json to make typescript tolerate parameters without declaring their type using the code snippet below. I stole this one from this stackoverflow post

// disable this rule:
// "strict": true,

// enable this rule:
"noImplicitAny": false

Please comment if you found any mistakes in this. I hope this helps

[MarcVegas]

Same issue for me. I've followed the instructions given on flowbite for vue.

Something that I've noticed, the instruction states: "Configure the template paths inside the tailwind.config.js file:"

The file generated by tailwindcss init -p is tailwind.config.cjs - don't know if this makes any difference.

The file extension won't cause an issue in this case. See @pl-jay comment or my new comment in this issue and see if one of the solutions works for you. Hope it helps

[pl-jay]

Using CDN actually didn't fixed the main issue for me, still flowbite components are not usable inside the project.

I only needed the date picker to use inside a form but I cannot the drop-down won't work, but only when code directly keep within the

Have to go with the workaround suggest by @MarcVegas to fix the npm package importing issue.

[oleg-agapov]

Can confirm, as of now (Oct 2) the official way of integration doesn't work with Vue 3.

Had to go with CDN inclusion directly to HTML, and this way it works.

The option with creating globat.d.ts file didn't work in my case, dunno why.

[curtgrimes]

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:

onMounted(() => {
  import("flowbite");
});

[potkot]

Faced the same problem. I am using vue-router. The components in the routes were specified like this: component: () => import('../components/auth/TheLoginPage.vue'), The flowbite dynamic components worked when I changed the component in the route to:

import TheLoginPage from '../components/auth/TheLoginPage.vue'
component: TheLoginPage,

[zoltanszogyenyi]

Hey everyone,

I think that the best solution will be to use the dedicated Flowbite Vue library because it is based on native Vue components instead of data attributes and event listeners.

[hurradieweltgehtunter]

Hey everyone,

I think that the best solution will be to use the dedicated Flowbite Vue library because it is based on native Vue components instead of data attributes and event listeners.

Unfortunately the Flowbite Vue Lib offers only a fraction of components :( Really looking forward to it but for now I have to switch back to my old css framework :(

[zoltanszogyenyi]

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

[zoltanszogyenyi]

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

[Khisrav]

For me flowbite js didnt work too, reason was lazy importing components in vue router