Shoelace vs Nuxt UI

up:: UI libraries

• Shoelace seems more stable
  • Some stuff didn’t work reliably with Nuxt UI
• Shoelace is more neutral in its UI, Nuxt UI is more modern
• Nuxt UI is more adapted to Nuxt ⚐ and Vue (duh!)
  • it uses Vue slots, instead of div(slot="header")
• I found Shoelace to be more intuitive to work with
• It’s easier to overwrite styles in Shoelace
• Navigation component is missing in Shoelace
• Both of those are more built for interactive sites,

Shoelace

Pros

• Shoelace seems more stable than Nuxt UI. It worked reliably. It also has more components.
• It’s more neutral in its UI
• I found it easier to overwrite styles in Shoelace.

Cons

• Shoelace isn’t built for Vue/Nuxt. It handles scoping differently.
• A Navigation component was missing.

Takeaways

• The Card UI looks great, we can take some inspiration there

Nuxt UI

Pros

• The consistency between all the elements is great. Everything looks coherent.
• All the details are taken care off, you don’t have to thing about hover states for example ⠀ Cons
• When things don’t work, they’re hard to debug when you can’t view the internals. one component broke the UCarousel and I have no idea why ⠀ Takeaways
• The UCarousel component is great.
• Slots are the way to go
• I like how they did the UButton component props: color and variant.