NuxtJS & Tailwind UI

0
votes

I've just tried to install fresh nuxtjs app with tailwindcss and tailwind ui component and got some errors. After some research I found out that @headlessui/vue and @heroicons/vue supports Vue 3 only. NuxtJS is based on Vue 2 :(

Is there any possible way to use Vue 3 in NuxtJS? NuxtJS 3 with Vue 3 was announced, but the roadmap for that was announced in November 2020, but there is no information about the release.

NuxtJS fits perfectly to our needs, so it would be great if we could use it somehow.

Do someone have any ideas?

1
vue.jsnuxt.jstailwind-css
No. You cannot use Vue 3 with Nuxt v2 (current stable, latest). The entire core engine is built around Vue 2 and is undergoing an entire rewrite to support Vue 3 in Nuxt 3. - Ohgodwhy

1 Answers

1
votes

For the HeadlessUI part, the answer was already given a few days ago: https://stackoverflow.com/a/67540286/8816585

Nuxt3 is really close to ship, probably at the end of the month or in the one to follow. If you want to keep updated, you can subscribe to this github issue or simply follow the co-founder @Atinux on Twitter.

You could try using @nuxtjs/composition-api to have access to the composition API but even with this, I'm not sure that this will work properly (or/and will be easy to use).

The best call as of right now, use Nuxt v2 with latest TailwindCSS v2.

The migration should not be that hard from 2 to 3. Also, HeadlessUI is something that you will not have access to as of right now IMO (maybe there are some packages that do handle the use of it but they will probably break/not be working so great).
Try using you own components or import a small UI library with only the JS logic. And remove it once Nuxt3 is here.