2

I installed tailwind css from default NUXT cli. And now i want to add flowbite [ Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more. How can I do that in my own application?

package.json

{
  "name": "nmdeia",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^4.2.1",
    "postcss": "^8.4.4"
  }
}
kissu
  • 40,416
  • 14
  • 65
  • 133
sium_hossain
  • 23
  • 7

1 Answers1

1

Update

Achieved to make it work with Nuxt3 thanks to this comment, here's a working Github repo.

Old answer

After spending 3 hours trying to configure it in any possible way with Nuxt 2 and 3, I just tried with Vue. Working great with Vue at least.

Regarding this part of the documentation

We are currently working on a standalone Vue.js component library to provide full support for this technology and compatibility with frameworks such as NuxtJS.

And this message from the main maintainer

It seems that this problem is associated with statically generated websites that are based on virtual DOM's like NextJS and Nuxt. We'll take a good look into this next week and see if we can provide support before we finish the standalone React & Vue.js libraries which will work seamlessly with these technologies.

The reason the interactive elements don't work is that the time at which Flowbite JS is being included, the DOM probably doesn't exist yet because the querySelector's are not targeting the elements correctly.

This has been solved for simple React and Vue.js projects by applying a DOMContentLoaded event listener on the document object, but I'm not sure why these querySelectors are not finding the elements in Nuxt or NextJs.

It's fair to say that Flowbite is not supporting components requiring some JS (like Modals, Dropdowns, etc...) for Nuxt2 and 3 at the moment. Of course, we can follow your Github issue and have somebody prove me wrong!

kissu
  • 40,416
  • 14
  • 65
  • 133