🐷
Vue3でおすすめのUI Framework
はじめに
Vuetify 3.0.0が2022/11にやっと公開されましたが、他のUI Frameworkに比べると、コンポーネントの数も少なく、がっかりな感じでした。そこで、今回は私が知っているわかる範囲で、Vue3でのおすすめUI Frameworkを紹介してみたいと思います。
おすすめUI Framework(Vue3)
今のところ、私が知っている範囲では、レスポンシブ対応させたいならquasar、PCだけならelement-plusという感じでしょうか。npm trandsを見ても、2021年まではant design vueも使っていたのですが、2022年2月にelemnt plusが正式リリースされてから、逆転している状況です。
-
quasar
- Material Design 2をベースにレスポンシブ対応しており、vuetifyの代替候補。おすすめ👍
- element-plusに比べて、独自のlayoutやCSSの記述が不要でシンプル。
- テーブルの大量データ表示にも対応しているが、element-uiに比べると、機能性が低い。(マルチソート、複数行ヘッダーなど)
- レスポンシブに対応しているので、ElectronでWindowsのexeアプリ、CapacitorでiOSやandroidアプリでも動かすことができる。
-
element-plus
- Alibabaグループが開発しているVueベースのUI Framework。中国では人気がある。
- quasarに比べて、コンポーネントの機能が充実している。
- テーブルの大量データ表示(Virtualized Table)にも対応。
-
ant design vue
- Alibabaグループが開発しているReactのUI FrameworkのVue.js版。
- 機能的にはelement-plusとほぼ同じ。
- テーブルの大量データを表示するコンポーネント(surely)は有料。
おすすめUI Framework(Vue2)
Vue2では、Vuetifyが最も利用されていたが、Vue3での対応状況が悪く、bootstrap-vueもまだalpha版しか公表されていない。
-
vuetify
- 2022/11にVue3版が正式公開されたが、機能が限定的。
-
element-ui
- Vue3では、element-plusと名前が変わった。
-
bootstrap-vue
- Vue3版は、現時点でalpha版しか存在しない。
おすすめUI Framework(React)
ちなみに、Reactの世界では昔からMaterial-UIが有名で、2021/9からMUIとブランド名が変更となっているが、主流に変化はない。
おわりに
最近のvueのセットアップでは、Vite+VueRouter4+Pinia+Vitestが標準セットアップとなり、Vuetifyを入れますか？という質問もなくなったので、今後はquasarの記事を増やしていこうかなと思います。
$ npm init vue@latest
Need to install the following packages:
create-vue@3.4.0
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … sample
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
Discussion