如何在 NUXT js 中设置 Flowbite答案

【问题标题】：How to set up Flowbite in NUXT js如何在 NUXT js 中设置 Flowbite
【发布时间】：2022-10-18 21:24:21
【问题描述】：

我从默认的 NUXT cli 安装了 tailwind css。现在我想添加 flowbite [Flowbite 是一个开源的 UI 组件库，基于实用程序优先的 Tailwind CSS 框架，具有暗模式支持、Figma 设计系统等。我怎样才能在我自己的应用程序中做到这一点？

包.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"
  }
}

【问题讨论】：

到目前为止，您自己尝试过什么来解决这个问题？
你好，我的回答对你的问题有帮助吗？

标签： vue.js nuxt.js

【解决方案1】：

更新

多亏了this comment，才能使它与 Nuxt3 一起工作，这是一个有效的Github repo。

旧答案

在花了 3 个小时尝试使用 Nuxt 2 和 3 以任何可能的方式对其进行配置之后，我刚刚尝试使用 Vue。至少与 Vue 一起工作得很好。

关于文档的this part

我们目前正在开发一个独立的 Vue.js 组件库，以提供对该技术的全面支持以及与 NuxtJS 等框架的兼容性。

以及来自主要维护者的this message

似乎这个问题与基于 NextJS 和 Nuxt 等虚拟 DOM 的静态生成网站有关。我们将在下周仔细研究这一点，看看我们是否可以在完成独立的 React 和 Vue.js 库之前提供支持，这些库将与这些技术无缝协作。

交互式元素不起作用的原因是在包含 Flowbite JS 的时间，DOM 可能还不存在，因为 querySelector 没有正确定位元素。

对于简单的 React 和 Vue.js 项目，通过在文档对象上应用 DOMContentLoaded 事件侦听器已经解决了这个问题，但我不确定为什么这些 querySelector 没有在 Nuxt 或 NextJs 中找到元素。

公平地说，Flowbite 目前不支持 Nuxt2 和 3 需要一些 JS（如 Modals、Dropdowns 等）的组件。当然，我们可以关注你的Github issue，让别人证明我错了！

【讨论】：