时间戳

首页 > 解决方案 > NuxtJS 和 Tailwind 用户界面

vue.js - NuxtJS 和 Tailwind 用户界面

问题描述

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

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

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

有人有什么想法吗？

标签： vue.jsnuxt.jstailwind-css

解决方案

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

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

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

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

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

推荐阅读