Vue3のUIフレームワーク／UIライブラリ紹介と比較 #CSS

🕒 更新：2022-11-08
🎯 更新内容：Vuetify 3について更新

初めに

広い意味のUIフレームワーク（ライブラリ）は大きく三つの種類があると思います。

1️⃣ ボタンなどのコンポーネントしかない、単純なUIコンポーネントライブラリ。区別はページのレイアウトはCSSを自分で書く必要。また、単純だが、React.jsかSvelte.js通用できないこともある。例：Equal
2️⃣ UIコンポーネントを加えて、Layout & CSS SystemもついているUIフレームワーク。区別は基本的に、ページのレイアウトはCSSを自分で書く必要はない。例：PrimeVue
但し、独自のLayout Systemか、独自のCSS Systemを採用している場合、一部のCSSを自分で書く必要なUIフレームワークもある。例：Naive UI
3️⃣ CSSフレームワーク、区別はUIコンポーネトを提供しない、Layout & CSS Systemだけを提供する。例：TailwindCSS

UIフレームワークリスト

🚧：開発中　✅：できる　❌：できない

	Vue 3	Nuxt 3*	種類	Breakpoint	日本語公式	TS	MIT	star
Vuetify 3	✅	✅	2️⃣	✅	❌	✅	✅	35k
Quasar	✅	✅	2️⃣	✅	❌	✅	✅	21.8k
Element+	✅	✅	2️⃣	✅	❌	✅	✅	16.7k
Ant Vue	✅	✅	2️⃣	✅	❌	✅	✅	17k
PrimeVue	✅	✅	2️⃣	✅	❌	✅	✅	2.7k
Vuestic UI	✅	✅	2️⃣	✅	❌	✅	✅	1.6k
Naive UI	✅	✅	2️⃣	✅	❌	✅	✅	10k
Vant UI	✅	✅	2️⃣	✅	❌	✅	✅	20k
Bootstrap-vue	❌	❌	2️⃣	✅	❌	✅	✅	14k
Bootstrap-vue 3	🚧	🚧	2️⃣	✅	❌	✅	✅	511
Oruga	✅	✅	1️⃣	❌	❌	✅	✅	824
BalmUI	✅	❌	2️⃣	✅	❌	✅	✅	404
Daisy UI	✅	✅	2️⃣	✅	✅	✅	✅	13.5k
Buefy	❌	❌	2️⃣	✅	❌	✅	✅	9.3k
Equal	✅	❌	1️⃣	❌	❌	✅	✅	830
Bulma	✅	✅	3️⃣	✅	❌	✅	✅	45.9k
TailwindCSS	✅	✅	3️⃣	✅	❌	✅	✅	59.7k

*Nuxt.js 3で使う場合、一部のUIフレームワークは外部ライブラリが必要

結論

なんでもいい、早めに成果物をみたい：Quasar　Element+
レスポンシブサイトを構築したい：Quasar
高度なカスタマイズができるUIフレームワークを使いたい：TailwindCSS　PrimeVue
スマートフォンサイトだけを構築したい：Vant
IOS、Android、EXEアプリを作りたい：Quasar

補足

Vuetify 3はリリースしたばかりなので、結論に含まれていません
クロスプラットフォームについて本記事は特に話しません
SEOに気になれば、Nuxt.jsがおすすめです。SPAアプリは生まれた時からSEOに弱いです
🔰 学習の初心者へ：
Vuetify 2がおすすめです。参考資料が多くて、Vuetify 2の場合は公式サイトで日本語のドキュメントもありますので、勉強しやすいと思います。また、Vuetify 3がリリースされましたので、APIが似ているVuetify 2を勉強する価値があると思います。
GitHubのstarは参考まで：
例えば、10kstarのNaive UIは中国で人気がありますが、日本で使う人があまりいないです。Evan Youさんのおすすめですが、日本でNaive UIを使えば、参考資料が少なくて、自分で問題を解決する覚悟が必要です
Bootstrap-vueとBuefyについて：
Vue3に対応していないですが、日本で人気があるフレームワークので、参考のためリストに追加しました。残念ですが、Buefyについては作者からVue3への対応はしません。Bootstrapについては詳しく下のBootstrap-vue 3を確認してください

こだわり

個人的なことですが、UIフレームワークに対して、Layout & CSS SystemとBreakpointの使いやすさは一番重視なポイントだと思います。そのため、この記事でUIフレームワークのLayout & CSS SystemとBreakpointについて特別に確認します。さらに、デフォルト✨Iconと🌏国際化（日本語化）についても紹介します。

Layout & CSS Systemの使いやすさとは

一般的に、UIフレームワークは独自のLayout & CSS Systemを使っています。その独自のシステムは理解しやすくて、余計なCSSを書く必要はないのが使いやすいLayout & CSS Systemだと思います。

<!-- Naive UI -->
<!--paddingはCSS感覚で自分で書く必要、API(n-layoutなど)の勉強と理解も必要 😐 -->
<n-layout has-sider>
   <n-layout-sider content-style="padding-top: 24px;">
   …
   </n-layout-sider>
</n-layout>
    
<!--Quasar -->
<!--見れば大体分かる、padding-topはサイズのsm、CSSを書く必要もない 😆 -->
<div class="q-pt-sm">…</div>

Breakpointの使いやすさとは

簡単に言うと、容器（divかコンポーネント）のBreakpointだけではなく、容器のpadding、margin、gutterでもBreakpointでレスポンシブ対応できるのが使いやすいBreakpointだと思います。つまり、Layout SystemのBreakpointのことです。

<!-- Element+ -->
<!-- コンポーネントのBreakpointがありますが、
paddingなどは使えないので、paddingのCSSクラスpaddingの@mediaを書かないと 😐 -->
<el-col :md="4" :lg="3" class="padding">
   <div>…</div>
</el-col>

<!-- PrimeVue -->
<!-- paddingまでのBreakpointがありますので、余計なCSSを書く必要はない 😆 -->
<div class="lg:col-12 md:col-6 lg:p-8 md:p-6">…</div>

ご注意！

BreakpointもLayout & CSS Systemも、良いUIフレームワークの判断基準ではありません。
一番ニーズに対応できて、問題が解決できるUIフレームワークが一番良いUIフレームワークではないかと思います。

Vue3のUIフレームワーク／UIライブラリ紹介と比較

初めに

UIフレームワークリスト

結論

補足

こだわり

Layout & CSS Systemの使いやすさとは

Breakpointの使いやすさとは

ご注意！

Vuetify 3

コメント

バージョンについて

まとめ

こだわり

Quasar

コメント

まとめ

こだわり

Element+

コメント

バージョンについて

まとめ

こだわり

Ant Design Vue

コメント

まとめ

こだわり

PrimeVue

コメント

使用

まとめ

こだわり

Vuestic UI

コメント

まとめ

こだわり

Naive UI

コメント

まとめ

こだわり

Vant UI

コメント

まとめ

こだわり

BootstrapVue 3

コメント

まとめ

こだわり

その他Vue3対応できるBootstrapのUIフレームワーク

Oruga

コメント

まとめ

こだわり

BalmUI

コメント

まとめ

こだわり

Daisy UI

コメント

まとめ

こだわり

Equal

コメント

まとめ

こだわり

Bulma

コメント

まとめ

こだわり

TailwindCSS

コメント

まとめ

こだわり

基本レイアウト

コンポーネントライブラリ

リスト

関連ライブラリ

その他のVue.js3対応UIフレームワーク