Vue.jsのUIライブラリ・フレームワークまとめ

汎用ライブラリ

Vuetify

「A Material Design Framework for Vue.js」の名の通り、Googleが提唱したマテリアルデザインをベースにしたVue UIライブラリ・フレームワークです。

Vuetify

ライブラリというよりかはVue.jsを拡張して独自のテンプレート・フレームワークに仕上げているイメージで、やや学習コストはかかりますが、モノにすれば高度なVue.jsアプリを短時間で組むことが可能になります。

VueTailwind

Vueで最近人気急上昇中のCSSフレームワーク・Tailwind CSSを簡単に使えるようにするVue UIライブラリ・フレームワークです。

VueTailwind

基本はHTMLで組んで必要なところだけ独自のコンポーネントで拡張するスタイルなので、学習コストが少なく済むのが大きなメリットです。

Element

デスクトップ向けのUIライブラリとして定番なのがElement。VuetifyがGoogleのマテリアルデザインなら、こちらはAppleのiOSのデザインに寄せてあるライブラリです。

Element

Vuetify同様独自の拡張をしているため学習コストはやや高めです。

Vue Material

こちらもGoogleのマテリアルデザインをベースにしたVue UIライブラリ・フレームワーク。VuetifyよりもよりGoogleのマテリアルデザインに忠実なデザインになっています。

Vue Material

独自の拡張をしていますが、通常のHTML要素と一緒に使う前提になっているため、学習コストはやや低めです。

BootstrapVue

Twitterの開発するCSSフレームワーク・BootstrapをVue.jsに簡単に取り込むためのUIライブラリ・フレームワーク。

BootstrapVue

とはいえ、単純にCSSを取り込むだけでなく、独自拡張をしているためフレームワーク的に使うことができます。普段からBootstrapを使っている方でも、やや学習コストが必要です。

Quasar

こちらもGoogleのマテリアルデザインベースにしたVue UIライブラリ・フレームワーク。独自のCLIも開発されており、かなり本格的なライブラリになっています。

Quasar

PWAやSSRなども一気に設定できるため、Vue UIライブラリ・フレームワークとしては、Nuxt.jsやGridsomeに近いものになっているため、Vue.jsをベースにした全く別のものと考えた方が良いでしょう。

Buefy

最近人気急上昇中のCSSフレームワーク・BulmaをベースにしたVue UIライブラリ・フレームワーク。Bootstrapっぽさがない点も人気です。

Buefy

Buefyをベースに独自拡張をしているため、学習コストはやや高めです。

Vuesax

VuesaxはモバイルアプリのようなUIを簡単に構築できるVue UIライブラリ・フレームワークです。

Vuesax

拡張性やコンポーネントの多さではVuetifyなどには叶いませんが、独特のアプリっぽいUIが組めるメリットは大きいでしょう。

iView

iViewは、直感的に使えるのが特徴のVue UIライブラリ・フレームワークです。

iView

他のフレームワークではコンポーネントを「v-app」など独自のルールで拡張をしていますが、iViewでは「Tabs」などコンポーネントを直感的に使えるようにしてあります。

ドキュメントをさっと見るとだけでも理解ができるので、Vueフレームワークに慣れていない方にオススメです。

Mint UI

Mint UIはモバイルに特化したVue UIライブラリ・フレームワークです。Webアプリでありながら、見た目をほぼモバイルアプリのようにすることが簡単にできるのが特徴です。

Mint UI

モバイル専用であれば良いですが、デスクトップ版にはやや使いづらいのが難点です。

管理画面用

CoreUI

CoreUIは、管理画面に特化したVue UIライブラリ・フレームワークです。ハイエンドな管理画面を簡単に構築することが可能です。

CoreUI

Vue.js以外にも、AnglarやReact、Laravel用のテンプレートも用意されています。