Skip to content

Commit 3868302

Browse files
skirtles-codeskirtles-code
committed
Move Component Libraries to a separate page
1 parent 81f14c5 commit 3868302

File tree

3 files changed

+120
-98
lines changed

3 files changed

+120
-98
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export default defineConfigWithTheme({
2121
{
2222
text: 'Introduction',
2323
link: '/'
24+
}, {
25+
text: 'Component Libraries',
26+
link: '/component-libraries'
2427
}, {
2528
text: 'Example Components',
2629
items: [

‎docs/component-libraries.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
description: Popular Vue 3 component libraries
3+
---
4+
# Component Libraries
5+
6+
These are some of the most widely used component libraries for **Vue 3**.
7+
8+
The monthly downloads should not be trusted as a way to judge the quality of a library. Specifically:
9+
* Some of these libraries are much older than others and will benefit from historical inertia.
10+
* Some used the same npm package name for the Vue 2 version of the library, while others did not. The final column of the table attempts to indicate whether the monthly downloads also include Vue 2.
11+
12+
<style>
13+
img[src^="https://img.shields.io"] {
14+
display: inline-block;
15+
vertical-align: middle;
16+
}
17+
18+
td > img {
19+
display: inline-block;
20+
}
21+
</style>
22+
<script setup>
23+
const cross = './images/cross.svg'
24+
const tick = './images/tick.svg'
25+
</script>
26+
27+
<table>
28+
<thead>
29+
<tr><th>Name</th><th>docs</th><th>npm</th><th>Vue 2?</th></tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<td>Vuetify<sup><a href="#component-libraries-notes">1</a></sup></td>
34+
<td><a href="https://vuetifyjs.com/en/introduction/why-vuetify/" target="_blank" rel="noopener noreferrer">docs</a></td>
35+
<td><a href="https://www.npmjs.com/package/vuetify" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/vuetify?color=%235588cc&label="></td>
36+
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
37+
</tr>
38+
<tr>
39+
<td>Element Plus</td>
40+
<td><a href="https://element-plus.org/en-US/" target="_blank" rel="noopener noreferrer">docs</a></td>
41+
<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>
42+
<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>
43+
</tr>
44+
<tr>
45+
<td>Quasar</td>
46+
<td><a href="https://quasar.dev/components" target="_blank" rel="noopener noreferrer">docs</a></td>
47+
<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>
48+
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
49+
</tr>
50+
<tr>
51+
<td>Headless UI<sup><a href="#component-libraries-notes">2</a></sup></td>
52+
<td><a href="https://headlessui.dev/" target="_blank" rel="noopener noreferrer">docs</a></td>
53+
<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>
54+
<td><img :src="cross" alt="Cross">&nbsp;No</td>
55+
</tr>
56+
<tr>
57+
<td>PrimeVue</td>
58+
<td><a href="https://primevue.org/installation" target="_blank" rel="noopener noreferrer">docs</a></td>
59+
<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>
60+
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
61+
</tr>
62+
<tr>
63+
<td>Ant Design Vue</td>
64+
<td><a href="https://www.antdv.com/components/overview/" target="_blank" rel="noopener noreferrer">docs</a></td>
65+
<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>
66+
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
67+
</tr>
68+
<tr>
69+
<td>Vant<sup><a href="#component-libraries-notes">3</a></sup></td>
70+
<td><a href="https://vant-ui.github.io/vant" target="_blank" rel="noopener noreferrer">docs</a></td>
71+
<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>
72+
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
73+
</tr>
74+
<tr>
75+
<td>Naive UI</td>
76+
<td><a href="https://www.naiveui.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
77+
<td><a href="https://www.npmjs.com/package/naive-ui" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/naive-ui?color=%235588cc&label="></td>
78+
<td><img :src="cross" alt="Cross">&nbsp;No</td>
79+
</tr>
80+
<tr>
81+
<td>bootstrap-vue-next<sup><a href="#component-libraries-notes">4</a></sup></td>
82+
<td><a href="https://bootstrap-vue-next.github.io/bootstrap-vue-next/" target="_blank" rel="noopener noreferrer">docs</a></td>
83+
<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>
84+
<td><img :src="cross" alt="Cross">&nbsp;No</td>
85+
</tr>
86+
<tr>
87+
<td>Oruga UI<sup><a href="#component-libraries-notes">5</a></sup></td>
88+
<td><a href="https://oruga.io/documentation/" target="_blank" rel="noopener noreferrer">docs</a></td>
89+
<td><a href="https://www.npmjs.com/package/@oruga-ui/oruga-next" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/@oruga-ui/oruga-next?color=%235588cc&label="></td>
90+
<td><a href="https://www.npmjs.com/package/@oruga-ui/oruga" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/@oruga-ui/oruga?color=%235588cc&label="></td>
91+
</tr>
92+
</tbody>
93+
</table>
94+
95+
<div id="component-libraries-notes"></div>
96+
97+
**Notes:**
98+
99+
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.
100+
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.
101+
3. Vant targets mobile browsers and isn't generally suitable for desktop applications.
102+
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.
103+
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.

‎docs/index.md‎

Lines changed: 14 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
<script setup>
2+
import { onMounted } from 'vue'
3+
4+
if (typeof window !== 'undefined') {
5+
const hash = window.location.hash
6+
7+
if (['#component-libraries', '#component-libraries-notes'].includes(hash)) {
8+
onMounted(() => {
9+
window.location = './component-libraries.html' + hash
10+
})
11+
}
12+
}
13+
</script>
114
# Introduction
215

316
> Thank you to those on the [Vue Land Discord](https://chat.vuejs.org/) and elsewhere who inspired these ideas.
@@ -36,101 +49,4 @@ In pretty much all cases, the styling and accessibility of these components is n
3649

3750
## Component libraries
3851

39-
These are some of the most widely used component libraries for **Vue 3**.
40-
41-
The monthly downloads should not be trusted as a way to judge the quality of a library. Specifically:
42-
* Some of these libraries are much older than others and will benefit from historical inertia.
43-
* Some used the same npm package name for the Vue 2 version of the library, while others did not. The final column of the table attempts to indicate whether the monthly downloads also include Vue 2.
44-
45-
<style>
46-
img[src^="https://img.shields.io"] {
47-
display: inline-block;
48-
vertical-align: middle;
49-
}
50-
51-
td > img {
52-
display: inline-block;
53-
}
54-
</style>
55-
<script setup>
56-
const cross = './images/cross.svg'
57-
const tick = './images/tick.svg'
58-
</script>
59-
60-
<table>
61-
<thead>
62-
<tr><th>Name</th><th>docs</th><th>npm</th><th>Vue 2?</th></tr>
63-
</thead>
64-
<tbody>
65-
<tr>
66-
<td>Vuetify<sup><a href="#component-libraries-notes">1</a></sup></td>
67-
<td><a href="https://vuetifyjs.com/en/introduction/why-vuetify/" target="_blank" rel="noopener noreferrer">docs</a></td>
68-
<td><a href="https://www.npmjs.com/package/vuetify" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/vuetify?color=%235588cc&label="></td>
69-
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
70-
</tr>
71-
<tr>
72-
<td>Element Plus</td>
73-
<td><a href="https://element-plus.org/en-US/" target="_blank" rel="noopener noreferrer">docs</a></td>
74-
<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>
75-
<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>
76-
</tr>
77-
<tr>
78-
<td>Quasar</td>
79-
<td><a href="https://quasar.dev/components" target="_blank" rel="noopener noreferrer">docs</a></td>
80-
<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>
81-
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
82-
</tr>
83-
<tr>
84-
<td>Headless UI<sup><a href="#component-libraries-notes">2</a></sup></td>
85-
<td><a href="https://headlessui.dev/" target="_blank" rel="noopener noreferrer">docs</a></td>
86-
<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>
87-
<td><img :src="cross" alt="Cross">&nbsp;No</td>
88-
</tr>
89-
<tr>
90-
<td>PrimeVue</td>
91-
<td><a href="https://primevue.org/installation" target="_blank" rel="noopener noreferrer">docs</a></td>
92-
<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>
93-
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
94-
</tr>
95-
<tr>
96-
<td>Ant Design Vue</td>
97-
<td><a href="https://www.antdv.com/components/overview/" target="_blank" rel="noopener noreferrer">docs</a></td>
98-
<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>
99-
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
100-
</tr>
101-
<tr>
102-
<td>Vant<sup><a href="#component-libraries-notes">3</a></sup></td>
103-
<td><a href="https://vant-ui.github.io/vant" target="_blank" rel="noopener noreferrer">docs</a></td>
104-
<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>
105-
<td><img :src="tick" alt="Tick">&nbsp;Yes</td>
106-
</tr>
107-
<tr>
108-
<td>Naive UI</td>
109-
<td><a href="https://www.naiveui.com/" target="_blank" rel="noopener noreferrer">docs</a></td>
110-
<td><a href="https://www.npmjs.com/package/naive-ui" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/naive-ui?color=%235588cc&label="></td>
111-
<td><img :src="cross" alt="Cross">&nbsp;No</td>
112-
</tr>
113-
<tr>
114-
<td>bootstrap-vue-next<sup><a href="#component-libraries-notes">4</a></sup></td>
115-
<td><a href="https://bootstrap-vue-next.github.io/bootstrap-vue-next/" target="_blank" rel="noopener noreferrer">docs</a></td>
116-
<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>
117-
<td><img :src="cross" alt="Cross">&nbsp;No</td>
118-
</tr>
119-
<tr>
120-
<td>Oruga UI<sup><a href="#component-libraries-notes">5</a></sup></td>
121-
<td><a href="https://oruga.io/documentation/" target="_blank" rel="noopener noreferrer">docs</a></td>
122-
<td><a href="https://www.npmjs.com/package/@oruga-ui/oruga-next" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/@oruga-ui/oruga-next?color=%235588cc&label="></td>
123-
<td><a href="https://www.npmjs.com/package/@oruga-ui/oruga" target="_blank" rel="noopener noreferrer">npm</a> <img alt="npm monthly downloads" src="https://img.shields.io/npm/dm/@oruga-ui/oruga?color=%235588cc&label="></td>
124-
</tr>
125-
</tbody>
126-
</table>
127-
128-
<div id="component-libraries-notes"></div>
129-
130-
Notes:
131-
132-
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.
133-
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.
134-
3. Vant targets mobile browsers and isn't generally suitable for desktop applications.
135-
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.
136-
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.
52+
* [Component Libraries](./component-libraries) - A list of the most popular component libraries for Vue 3.

0 commit comments

Comments
 (0)