shadcn/ui for Vue.js

shadcn/ui is a popular component library in the React ecosystem that has now been ported over to Vue.js. It's built on top of Tailwind CSS and Radix and allows for easy control and customization of components. Let's take a look at some of the features available and how you would use it in a Vue.js project.
shadcn-vue: www.shadcn-vue.com/
radix-vue: www.radix-vue.com/
GitHub Repo Example: github.com/drehimself/shadcn-...
LINKS
My courses: codewithdre.com
Sign up for my newsletter: andremadarang.com/newsletter
My website: andremadarang.com
Twitter: / drehimself
GitHub: github.com/drehimself
CodePen: codepen.io/drehimself

[@drehimself]

There are now specific instructions for Laravel Inertia/Vue 3 Typescript: www.shadcn-vue.com/docs/installation/laravel.html. Tried it myself and it works great!

[@whizzie3367]

How about for nuxt js?

[@rohitkharche7562]

Making default vue's green primary color in docs is just so obvious. Great port mate 😊

[@Zetlify_Official]

We searched a lot for a Vue 3 UI library for our project. We tried some libraries, but they didn't work for us as expected. In the end, we decided to build our own components, even though it's difficult. As soon as we finish reviewing this library, we'll consider using it for our project. We're mainly having problems with tables, filtering, dates, selects, search, and dashboard UI.

[@tiri2.]

Thank you blud for this video. This is what i was looking for!

[@namesurname_]

Thank you! This video helped me a lot

[@codedjango]

Wow...this is awesome...

[@krakatoom]

Thx for clean explanation. It's always especially for nooks as I hard to decipher certain docs..😊

[@Fraps224]

this is awesome thank you

[@khaledsanny4817]

YYYYEAHHHH this is what I was waiting for DMNT IT.... 😂😂💪💪 big UP to y'all

[@isabelphillips451]

Thanks for the video, Andre. I find a few things interesting with your setup. 1. What extension are you using to wrap the selected HTML element with a section HTML element. 2. What extension are you using inside of VSCode to search through SVG icons Thank you once again for this video

[@drehimself]

1) It's a command built into emmet (and VSCode) and called "Emmet Wrap with Abbreviation." You should be able to try it out in your command palette and bind it to a shortcut if you like. I use Ctrl + w. 2) It's a Raycast extension for heroicons: www.raycast.com/johndoe123789/heroicons

[@staticred1559]

It seems like they have now added support to Laravel + IntertiaJS, didnt try it yet, but its in the docs

[@ihsanZed]

still have issue with some component, for example date picker

[@onelvisdelarosa4116]

Thank you very much for the video. Do you happen to have an example with Nuxt? I have been trying to have this library working with Nuxt, but I keep getting "ERROR Cannot read properties of undefined (reading 'sys') (x10)" on components like Tabs, Selects, etc.

[@drehimself]

I just tried the tabs component in my Nuxt 3 example and I'm getting the same error as you. I think more work still has to be done to make all the components compatible with Nuxt. Here's a GitHub issue with Nuxt support: github.com/radix-vue/shadcn-vue/issues/10

[@onelvisdelarosa4116]

@@drehimself Thank you! I thought it was just me haha, hopefully they get into it soon.

[@oOSp0ngeOo]

Hey guys. I had this issue too, and submitted an issue. There has now been an update to the website instructions for a remedy. Just run npm install -D typescript

[@onelvisdelarosa4116]

@@oOSp0ngeOo Thank you!!! that did in fact worked!

[@whizzie3367]

Please can you make tutorials for nuxt js??

[@nabeelyousafpasha]

Respect from Pakistan

[@thomaspotterdotexe]

What about tables? Can you show us? Tables are the main issues in components library when dealing with like server-side pagination, filtering, ordering, searching, etc. I've tried a lot library, hopefully this will fixed it.

[@drehimself]

It uses Tanstack Table for tables. I have a video on it from a few months ago. However, like you're saying if you have large amounts of data you probably want to incorporate the server-side in some way. If you use Laravel, both Inertia and Livewire have solutions for this. It's on my list of ideas for videos, hopefully, I can get to it sometime soon.

[@stefandili2650]

What kind of problems? We're using quasar (material) with tanstack-(vue)query. Works like a charm!

[@Suriprofz]

seems it's missing wrappers around the components. so you can just import the Dialog. and not all seperate components -> DialogFooter dialog... whatever. ofcouse we can make it ourselfs. but seems kinda hackish this way

[@jeandarius8791]

All this to have a button similar to those of Bulma or bootstrap 😢

[@MarcGentner-vq4uv]

to be honest, i worked with sass, scss, css, bootstrap, bulma, and tailwind. and tailwind is in my opinion the worst. its only usable because of the ecosystems that are build on tailwind. i love shadcn, the filosofy but i hate tailwind. i have never seen code so unreadable like tailwind on big projects...

[@manuchehrraupov2581]

It's o new and not stable yet. We tried to use it in our project but faced a lot of bugs. Better to wait stable version...