-
Notifications
You must be signed in to change notification settings - Fork 734
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to set up Flowbite in NUXT js #131
Comments
Regarding this reply and my answer on Stackoverflow, it's fair to say that Nuxt is not supported as of right now. It would be nice to have some clear message indicating that Nuxt is not being supported. |
Nuxt 3 configuration
Create new nuxt client plugin (e.g.: plugins/flowbite.client.ts)
Restart the server and refresh the page. |
@nejckorosec looks like it's a working configuration indeed! Here is an exact reproduction: https://github.com/kissu/n3-configure-flowbite |
Development mode works but I get an error when building
|
This solution only works for a single vue page, as soon as the DOM changes (by introducing vue components and NuxtLink's to the project) every flowbite component that requires js becomes unresponsive, such as modals, dropdowns, etc... |
Has anyone managed to get this working? |
hack: bypass nuxt's plugin installation feature altogether and install via. official cdn: flowbite docs (nuxt.config.ts)
|
it works for me :
plugins/utils.client.js :
nuxt.config.js :
|
Since Nuxt is not production-ready and Flowbite doesn't have any install recommendations yet, you can use CDN option |
This may be linked to #3. I just oopened a PR to solve that issue. |
Hey everyone, Please check out the Flowbite Vue component library for Vue & Nuxt.js projects. Until then, I will take a look into this either way. |
import like this: |
future reference for Nuxt 3 plugins/utils.client.js :
|
WARN flowbite doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix. √ Server built in 1129ms 14:08:24 ERROR Rollup error: EISDIR: illegal operation on a directory, readlink 'Z:\Code\n3-configure-flowbite\node_modules\destr\dist\index.mjs' nitro 14:08:27 ERROR EISDIR: illegal operation on a directory, readlink 'Z:\Code\n3-configure-flowbite\node_modules\destr\dist\index.mjs' |
Im currently having the same issue |
Same issue, works in dev but not in prod. |
I think I found a temporary solution, just import * as flowbite from 'flowbite';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(flowbite);
}); |
Experiencing a strange issue. I could get Flowbite setup and running on Nuxt 3, both via plugin or adding it via My problem is that everything works fine, as long as I don't navigate to another view. When navigating to another view, or just forward and back to where I came from, the library doesn't seem to pick up on the change and doesn't try to initiate the components. It only comes back to life after a full browser refresh.
Or via plugin, as referenced here #131 (comment), a warning comes up about the imported Flowbite library, which is one of the reasons I ended up just using the Is this something any of you have faced before? Screen.Recording.2022-11-04.at.4.59.31.PM.mov |
Does your Datepicker works? Mine does not work Properly |
None of the above solutions worked for my project, I'm using version 3.0.0 of nuxt and ^1.5.4 of flowbite. However, I was curious and went to analyze the difference in package versions and realized that flowbite changed the export structure of the main file. Based on that, I changed the flowbite.client.ts file to the following:
And it worked for me! |
i am on node 18.12.0 and this is my package.json and this is my tailwind config module.exports = { and i created plugins/flowbite.client.ts with export default defineNuxtPlugin((nuxtApp) => { but i do not get flowbite styling at all. can you tell me what i am missing ? |
Thanks, this also works for me. However, there seems to be a new issue that the flowbite javascript files would not be downloaded when changing route. I have to refresh the page to make the component work. For now, I just added I think I will not use flowbite with Nuxt in my future project unless they have official support. |
Try to add this in your tailwind config file. module.exports = {
content: [
...
'./node_modules/flowbite/**/*.js',
],
} |
This has been fixed in the Flowbite v1.6.1 release. Now we have an official Tailwind + Nuxt.js + Flowbite integration guide and even a starter repo that you can check out. |
Thank you for making this Nuxt3 integration and ALSO for documenting it in the docs. Just because of that, I am going to strongly consider purchasing a PRO version. Question: There are two ways we can use Flowbite components in Nuxt3: 1.) Simply use data attributes in the HTML elements and then import Assuming my understanding is correct (btw, same thing as Bootstrap -- can use both data attributes or javascript objects) |
Hi guys, anyone have this working with latest Nuxt version 3.1.1? I have to revert back to 3.0.0 to get it to work but then now I"m not able to use |
Works fine for me( Nuxt 3.1.1 + flowbite 1.6.3), but I am not using |
I got it working thx |
Can we initialize flowbite on our app.vue or should we do it component by component? `import { initFlowbite } from 'flowbite' onMounted(() => { |
Having the same issues as report above. Current Nuxt integration instruction do not completely work. I had to add plugins/flowbite.client.ts (VS Code complains about this and does not like the Flowbite import, but still runs once you make some of the suggested updates above) to get any of the data attributes to work (some still do not). Navigating to a page also does not seem to load the Flowbite JS, so attributes stop working, have to hard refresh. No sure if I am doing something wrong or Flowbite components that require JS just do not work in Nuxt. Nuxt: 3.8.2 |
Actually same problem, have to init flowbite component on |
Hey guys, I found something simple & working for me by DengSihan on stackoverflow.
import { initFlowbite } from 'flowbite';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.mixin({
mounted () {
initFlowbite();
}
});
}); Nuxt: 3.9.3 Would be nice to have an official documentation on the flowbite side so that we are harmonized in a “clean” way |
@duboiss its works but when I console.log in this plugin, it runs many times. Are you experiencing the same issue? |
@imphunq
|
I installed tailwind css from default NUXT cli. And now i want to add flowbite in my nuxt application. How can i do that?
Thanks in advance ❤️
package.json
The text was updated successfully, but these errors were encountered: