Skip to content

Commit

Permalink
Update component libraries page
Browse files Browse the repository at this point in the history
  • Loading branch information
@skirtles-code
skirtles-code committed Nov 10, 2023
1 parent 3868302 commit 15e9cff
Showing 1 changed file with 100 additions and 18 deletions.
118 changes: 100 additions & 18 deletions docs/component-libraries.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ description: Popular Vue 3 component libraries
---
# Component Libraries

These are some of the most widely used component libraries for **Vue 3**.
Listed below are some of the most widely used component libraries for **Vue 3**.

## Styled Vue components

These libraries all provide large collections of ready-to-use Vue components, complete with styling.

The monthly downloads should not be trusted as a way to judge the quality of a library. Specifically:
* Some of these libraries are much older than others and will benefit from historical inertia.
Expand Down Expand Up @@ -41,32 +45,26 @@ const tick = './images/tick.svg'
<td><a href="https://www.npmjs.com/package/element-plus" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/element-plus?color=%235588cc&label="></td>
<td><a href="https://www.npmjs.com/package/element-ui" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/element-ui?color=%235588cc&label="></td>
</tr>
<tr>
<td>Quasar</td>
<td><a href="https://quasar.dev/components" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/quasar" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/quasar?color=%235588cc&label="></td>
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
</tr>
<tr>
<td>Headless UI<sup><a href="#component-libraries-notes">2</a></sup></td>
<td><a href="https://headlessui.dev/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/@headlessui/vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/@headlessui/vue?color=%235588cc&label="></td>
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
<tr>
<td>PrimeVue</td>
<td><a href="https://primevue.org/installation" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/primevue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/primevue?color=%235588cc&label="></td>
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
</tr>
<tr>
<td>Quasar</td>
<td><a href="https://quasar.dev/components" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/quasar" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/quasar?color=%235588cc&label="></td>
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
</tr>
<tr>
<td>Ant Design Vue</td>
<td><a href="https://www.antdv.com/components/overview/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/ant-design-vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/ant-design-vue?color=%235588cc&label="></td>
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
</tr>
<tr>
<td>Vant<sup><a href="#component-libraries-notes">3</a></sup></td>
<td>Vant<sup><a href="#component-libraries-notes">2</a></sup></td>
<td><a href="https://vant-ui.github.io/vant" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/vant" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/vant?color=%235588cc&label="></td>
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
Expand All @@ -78,11 +76,23 @@ const tick = './images/tick.svg'
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
<tr>
<td>bootstrap-vue-next<sup><a href="#component-libraries-notes">4</a></sup></td>
<td>bootstrap-vue-next<sup><a href="#component-libraries-notes">3</a></sup></td>
<td><a href="https://bootstrap-vue-next.github.io/bootstrap-vue-next/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/bootstrap-vue-next" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bootstrap-vue-next?color=%235588cc&label="></td>
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
<tr>
<td>Vuestic UI</td>
<td><a href="https://ui.vuestic.dev/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/vuestic-ui" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/vuestic-ui?color=%235588cc&label="></td>
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
<tr>
<td>Flowbite Vue<sup><a href="#component-libraries-notes">4</a></sup></td>
<td><a href="https://flowbite-vue.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/flowbite-vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/flowbite-vue?color=%235588cc&label="></td>
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
<tr>
<td>Oruga UI<sup><a href="#component-libraries-notes">5</a></sup></td>
<td><a href="https://oruga.io/documentation/" target="_blank" rel="noopener noreferrer">docs</a></td>
Expand All @@ -97,7 +107,79 @@ const tick = './images/tick.svg'
**Notes:**

1. Vuetify 3 is compatible with Vue 3. Vuetify 3.0.0 was released at the end of October 2022 and is still missing some important features relative to earlier versions.
2. Headless UI isn't really comparable to the other libraries on the list, but it does attempt to solve similar problems and it is easily popular enough to warrant a mention.
3. Vant targets mobile browsers and isn't generally suitable for desktop applications.
4. bootstrap-vue-next started out as bootstrap-vue-3, <a href="https://www.npmjs.com/package/bootstrap-vue-3" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bootstrap-vue-3?color=%235588cc&label=">. It was an independent rewrite of BootstrapVue: <a href="https://bootstrap-vue.org/" target="_blank" rel="noopener noreferrer">docs</a>, <a href="https://www.npmjs.com/package/bootstrap-vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bootstrap-vue?color=%235588cc&label=">, which was a very popular Vue 2 component library. In late 2022, BootstrapVue announced work on Vue 3 compatibility, <https://bootstrap-vue.org/vue3>. In early 2023, bootstrap-vue-3 was renamed to bootstrap-vue-next.
2. Vant targets mobile browsers and isn't generally suitable for desktop applications.
3. bootstrap-vue-next started out as bootstrap-vue-3, <a href="https://www.npmjs.com/package/bootstrap-vue-3" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bootstrap-vue-3?color=%235588cc&label=">. It was an independent rewrite of BootstrapVue: <a href="https://bootstrap-vue.org/" target="_blank" rel="noopener noreferrer">docs</a>, <a href="https://www.npmjs.com/package/bootstrap-vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bootstrap-vue?color=%235588cc&label=">, which was a very popular Vue 2 component library. In late 2022, BootstrapVue announced work on Vue 3 compatibility, <https://bootstrap-vue.org/vue3>. In early 2023, bootstrap-vue-3 was renamed to bootstrap-vue-next.
4. Flowbite Vue provides Vue components built using Flowbite. Flowbite itself is conceptually similar to Bootstrap or Buefy and is framework-agnostic.
5. The Vue 2 library Buefy: <a href="https://buefy.org/" target="_blank" rel="noopener noreferrer">docs</a>, <a href="https://www.npmjs.com/package/buefy" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/buefy?color=%235588cc&label=">, combines Vue with Bulma. The lead maintainer of that project also maintains Oruga UI and recommends using Oruga as the successor to Buefy for Vue 3.

## Unstyled Vue components

These libraries provide Vue components without styling. They can be used to build your own component library.

<table>
<thead>
<tr><th>Name</th><th>docs</th><th>npm</th><th>Vue 2?</th></tr>
</thead>
<tbody>
<tr>
<td>Headless UI</td>
<td><a href="https://headlessui.dev/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/@headlessui/vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/@headlessui/vue?color=%235588cc&label="></td>
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
<tr>
<td>Radix Vue</td>
<td><a href="https://www.radix-vue.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/radix-vue" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/radix-vue?color=%235588cc&label="></td>
<td><img :src="cross" alt="Cross">&nbsp;No</td>
</tr>
</tbody>
</table>

There are also collections of example Vue components that use these two libraries:

* [Tailwind UI](https://tailwindui.com/) - Headless UI and Tailwind CSS.
* [shadcn-vue](https://www.shadcn-vue.com/) - Radix Vue.

## CSS frameworks

The CSS frameworks listed here are not specifically tied to Vue.

daisyUI extends Tailwind CSS, adding utility classes for writing components.

Flowbite is conceptually similar to Bootstrap or Bulma, but built using Tailwind CSS.

<table>
<thead>
<tr><th>Name</th><th>docs</th><th>npm</th></tr>
</thead>
<tbody>
<tr>
<td>Tailwind CSS</td>
<td><a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/tailwindcss" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/tailwindcss?color=%235588cc&label="></td>
</tr>
<tr>
<td>Bootstrap</td>
<td><a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/bootstrap" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bootstrap?color=%235588cc&label="></td>
</tr>
<tr>
<td>Bulma</td>
<td><a href="https://bulma.io/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/bulma" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/bulma?color=%235588cc&label="></td>
</tr>
<tr>
<td>daisyUI</td>
<td><a href="https://daisyui.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/daisyui" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/daisyui?color=%235588cc&label="></td>
</tr>
<tr>
<td>Flowbite</td>
<td><a href="https://flowbite.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
<td><a href="https://www.npmjs.com/package/flowbite" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/flowbite?color=%235588cc&label="></td>
</tr>
</tbody>
</table>

All of these libraries can be used with Vue, but some of them include their own JavaScript code to add interactivity, which may clash with Vue. You'll likely need to implement that interactivity yourself instead, or use one of the Vue integrations listed earlier in [Styled Vue components](#styled-vue-components).

0 comments on commit 15e9cff

Please sign in to comment.