NuxtJS 和 Tailwind 用户界面

Posted 2023-03-07

【中文标题】NuxtJS 和 Tailwind 用户界面

【英文标题】：NuxtJS & Tailwind UI

【发布时间】：2021-08-10 10:23:14

【问题描述】：

我刚刚尝试使用 tailwindcss 和 tailwind ui 组件安装新的 nuxtjs 应用程序，但出现了一些错误。经过一番研究，我发现@headlessui/vue 和@heroicons/vue 仅支持Vue 3。 NuxtJS 基于 Vue 2 :(

有没有可能在 NuxtJS 中使用 Vue 3 的方法？带有 Vue 3 的 NuxtJS 3 已发布，但其路线图已于 2020 年 11 月宣布，但没有关于发布的信息。

NuxtJS 非常适合我们的需求，所以如果我们能以某种方式使用它会很棒。

有人有什么想法吗？

【问题讨论】：

没有。您不能将 Vue 3 与 Nuxt v2（当前稳定版，最新版）一起使用。整个核心引擎是围绕 Vue 2 构建的，并且正在进行全面重写以在 Nuxt 3 中支持 Vue 3。

【参考方案1】：

HeadlessUI部分，前几天已经给出了答案：https://***.com/a/67540286/8816585

Nuxt3 真的快要发货了，可能在月底或下一个。如果你想保持更新，你可以订阅这个github issue或者直接关注联合创始人@AtinuxTwitter。

您可以尝试使用 @nuxtjs/composition-api 来访问组合 API，但即使这样，我也不确定它是否能正常工作（或/并且易于使用）。

目前最好的调用，使用 Nuxt v2 和最新的 TailwindCSS v2。

从 2 到 3 的迁移应该不会那么难。此外，HeadlessUI 是目前 IMO 无法访问的东西（也许有一些包可以处理它的使用，但它们可能会损坏/不是很好）。 尝试使用您自己的组件或导入一个仅包含 JS 逻辑的小型 UI 库。并在 Nuxt3 出现后将其删除。

【讨论】：

感谢您的回答！我尝试了组合 API，但失败了......所以我尝试了 NextJS，它是 TailwindCSS / UI 也由必要的组件（heroicons 和 headlessui）制成，它就像一个魅力。所以现在我学习 NextJS 和 React :)

nuxt 3 超级慢，非常失望，从 2019 年开始等待

@LIHOTAN 不确定您在何处以及使用哪种配置进行了尝试。你能详细说明一下吗？