🐷

Vue3でおすすめのUI Framework

2022/11/13に公開約2,700字

はじめに

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が正式リリースされてから、逆転している状況です。
https://npmtrends.com/ant-design-vue-vs-element-plus-vs-quasar

  • 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版しか公表されていない。
https://npmtrends.com/bootstrap-vue-vs-element-ui-vs-vuetify

  • vuetify
    • 2022/11にVue3版が正式公開されたが、機能が限定的。
  • element-ui
    • Vue3では、element-plusと名前が変わった。
  • bootstrap-vue
    • Vue3版は、現時点でalpha版しか存在しない。

おすすめUI Framework(React)

ちなみに、Reactの世界では昔からMaterial-UIが有名で、2021/9からMUIとブランド名が変更となっているが、主流に変化はない。
https://npmtrends.com/@material-ui/core-vs-@mui/material-vs-antd-vs-react-bootstrap

おわりに

最近の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

ログインするとコメントできます