Vue compatibility

[benjamincanac]

After many requests from the community (nuxt/ui#187, nuxt/ui#298, nuxt/ui#543, nuxt/ui#850, nuxt/ui#1514, etc.), the goal would be to make @nuxt/ui compatible for non-Nuxt apps as a Vite plugin I guess.

The minimal features would be to:

• Run Tailwind CSS vite plugin
• Inject components
• Inject composables
• Use @iconify/vue instead of @nuxt/icon (we don't need that much complexity I guess)
• Use VueUse https://vueuse.org/core/useDark/#usedark instead of @nuxtjs/color-mode
• Make Nuxt specific imports (#imports, #build, etc.) work
• Make Nuxt specific composables (useAppConfig, ~~useId~~, etc.) work
• Make theming with app.config.ts work in some way

[GalacticHypernova]

It would probably be worth it to keep the Nuxt config for Nuxt apps and the non-Nuxt config for non-Nuxt apps. It could probably be done with a few wrapper functions that would dynamically determine if it's running in a Nuxt context. I assume using something more tightly-integrated with the Nuxt ecosystem (like an actual Nuxt module) would offer better capabilities for Nuxt apps than generic Vue/non-Nuxt tools (not that I think that non-Nuxt tools are less capable, but it's just better coupled, like using Nitro vs Express as the server).

If you'd like, I can do my best to assist in making this change

[TechAkayy]

Very happy to see this happening. Thank you! ☺️ I can help with any testing, please let me know.

[ManukMinasyan]

@benjamincanac @danielroe Could you please confirm if you plan to support Vue applications? If so, could you provide guidance on how to install and test this with Vue 3? Additionally, if needed, how can I assist in extending support to Vue? Thanks

[danielroe]

i’ll provide guidance once i implement it 😆

[ManukMinasyan]

i’ll provide guidance once i implement it 😆

They are any deadline?

[ddahan]

What a great news! Congrats on this. I'm curious to know if you have already found another name? I guess keeping "Nuxt UI" would be misleading regarding to the compatibility.

[benjamincanac]

We have no plan to rename it, this is a module built and thought for Nuxt that will support Vue 😊

[danielroe]

made some good progress today - ~~just need to implement icon + color mode support!~~

https://github.com/user-attachments/assets/d16af91d-99da-4e9c-b618-9fe0d91c5b98

you can see the progress in a livestream at https://youtube.com/live/KRYFcyNNxDk?feature=share if you want

• [x] Run Tailwind CSS vite plugin
• [x] Inject components
• [x] Inject composables
• [x] Use @iconify/vue instead of @nuxt/icon (we don't need that much complexity I guess)
• [x] Use VueUse https://vueuse.org/core/useDark/#usedark instead of @nuxtjs/color-mode
• [x] Make Nuxt specific imports (#imports, #build, etc.) work
• [x] Make Nuxt specific composables (useAppConfig, ~~useId~~, etc.) work
• [x] Make theming with app.config.ts work in some way

[lewebsimple]

Wow thanks Daniel « Heroe » !!!

[twf-nikhila]

@benjamincanac so now can i use it without nuxtjs?

[benjamincanac]

Yes you can 😊 https://ui3.nuxt.dev/getting-started/installation/vue