優れたビューレンダリングライブラリには、開発者が作業できるサードパーティのコンポーネントがたくさん含まれている必要があります。 Vueも例外ではありません。 それはあなたがあなたが適切だと思うどんなプロジェクトでも使うためのたくさんの素晴らしいコンポーネントライブラリを持っています。

最終更新日：2017年11月27日。

過去1年間で、Vue.js用の高品質のデスクトップ/ Webに適したコンポーネントライブラリとフレームワークの数が急増しました。つまり、この記事を更新するときが来ました。 ここでは、次のプロジェクトについて十分な情報に基づいた決定を下せるように、各ライブラリのさまざまな機能と統計の概要を説明します。

簡潔にするため、また選択の麻痺を避けるために、大規模である可能性があるが、保守が不十分であるか、完全なドキュメントが不足しているように見えるライブラリを積極的に除外します。

これらのコンポーネントコレクションの大部分は、MaterialまたはAntの設計ガイドラインに従いますが、いくつかの外れ値があります。 そのため、デザイン言語に基づいてカテゴリに分類します。

コンポーネントカテゴリ

コンポーネントカテゴリは、すべてのコンポーネントを一覧表示することなく、ライブラリに含まれるコンポーネントを示すために使用されます。 可能なカテゴリのリストは次のとおりです。 ライブラリに各カテゴリで指定されたコンポーネントの大部分がない場合、そのカテゴリは存在として示されません。

  • 入力：ボタン、入力フィールド、チェックボックスなど。
  • 高度な入力：日付ピッカー、オートコンプリート、ファイルアップローダー
  • インジケーター：バッジ、進行状況インジケーター、トースト、スナックバー
  • ナビゲーション：メニュー、タブなど
  • ダイアログ：ダイアログ、モーダル、ポップオーバー
  • レイアウト：サイドパネル、リスト、カード、グリッド、タイポグラフィ

マテリアルデザイン

多くの人がマテリアルデザインに精通しています。マテリアルデザインは、Googleが作成したデザイン言語で、フラットなスタイルとリアルな照明と影を組み合わせて、使い慣れたインターフェースを作成します。 Vueには、マテリアルデザインを実装するさまざまなライブラリがあります。

Vueマテリアル

Vue Material は、マテリアルデザイン仕様のほぼ全体をカバーする多数のコンポーネントを備えた強力なライブラリです。 仕様に可能な限り準拠しているため、コンポーネントはGoogleのネイティブ実装とほとんど区別できません。 ちなみに、しかし、それは少し遅い側に見えます。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜5,000つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 390KB
  • 主な開発者： Marcos Moura
  • ドキュメントの品質：完全
  • ドキュメント言語：英語
  • 主要コミュニティ言語：英語
  • コンポーネント：入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：中
  • テーマ性： 動的なインコード。 コンポーネントごとに交換できます。
  • モジュール性： High （ツリーシェイクを使用してコンポーネントを直接インポートする機能）
  • スペック精度：高
  • リポジトリ： https://github.com/vuematerial/vue-material

結論（TL; DR）これを使用してアプリ全体を開発することをお勧めします。 ファイルアップローダーやオートコンプリートコンボボックスなどのより高度な入力には、他のサードパーティコンポーネントが必要になる場合がありますが、それ以外のほとんどすべてについては、 VueMaterialで対応できます。

Vuetify

Vuetify は、もう1つの優れたマテリアルデザインコンポーネントライブラリです。 これは、アプリを0から本番環境に移行するためにゼロから設計されています。 そのため、最も単純なユースケースから完全なSSR、Electron、PWA、Nuxt.jsの例まですべてをカバーする8つのCLIテンプレートが含まれています。 Vue Material と同様に、マテリアルデザインの仕様に準拠していますが、コンポーネントの追加オプションとカスタマイズにより、ほぼすべての可能なユースケースをカバーします。 Vuetify にもその背後に大きなコミュニティがあり、多くの企業スポンサーがいます。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜7,000つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 463KB
  • 主な開発者： John Leider
  • ドキュメントの品質：完全
  • ドキュメント言語：英語
  • 主要コミュニティ言語：英語
  • コンポーネント：入力、高度な入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：高
  • テーマ性：カスタムカラー、手動オーバーライド
  • モジュール性：高（コンポーネントを個別にインポートすることは可能ですが、少し複雑です。）
  • スペック精度：高
  • リポジトリ： https://github.com/vuetifyjs/vuetify

結論（TL; DR） Vuetify には、必要なものがすべて揃っています。 選択すれば間違いないでしょう。 それはあなたのためにかなりの数の選択をするように見えます、しかし一方でそれはあなたに働くためのたくさんのオプションをあなたに残します。

クエーサーフレームワーク

Quasar Framework は、すべてを網羅した、すべてを網羅したフレームワークとして意図されています。 以前はモバイルコンポーネントのまとめでスポットを獲得していましたが、その後、一般的なデスクトップおよびWebアプリコンポーネントを含むように機能をさらに拡張しました。 CLIもあります！ それは基本的にあなたが考えることができるほとんどすべてを備えた台所の流しです。 一緒に Material Design テーマも含まれています iOS 今後さらに多くのテーマがあります。 私の唯一の不満は、コンポーネントの品質がかなり低く、フォントとアニメーションの使用法に一貫性がないことです。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜4,200つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 463KB
  • 主な開発者： Razvan Stoenescu
  • ドキュメントの品質：すばらしい！
  • ドキュメント言語：英語
  • 主要コミュニティ言語：英語
  • コンポーネント：入力、高度な入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：中
  • テーマ性：色変更/スタイラス
  • モジュール性：低
  • スペック精度：低
  • リポジトリ： https://github.com/quasarframework/quasar

結論（TL; DR） Quasar は、できるだけ少ないカスタム作業でできるだけ多くのプラットフォームとコンポーネントをカバーしたい場合に最適です。 常に改善されていますが、現時点では、本格的な商用アプリよりもプロトタイプを対象としているようです。

鋭いUI

Keen UI は、マテリアルデザインスタイルのコンポーネントの重要なセットを提供します。 仕様に直接準拠しているわけではなく、多くの場合、より軽いコンポーネントとより高速なトランジションを選択しますが、その結果、ここにあるより重いライブラリのいくつかよりも高速に感じられます。 コンポーネント以外はほとんど含まれていません。 レイアウトやタイポグラフィシステムはありません。 あなたの目標が何であるかに応じて、これはプラスまたはマイナスになる可能性があります。 結果として、それは前述のオプションのいくつかよりも少し軽量です。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜3,000つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 284KB
  • 主な開発者： Josephus Paye II
  • ドキュメントの品質：完全
  • ドキュメント言語：英語
  • 主要コミュニティ言語：英語
  • コンポーネント：入力、高度な入力、インジケーター、ナビゲーション、ダイアログ
  • アニメーション：中
  • テーマ性： SASSテーマ、グローバル構成
  • モジュール性： High （ツリーシェイクを使用してコンポーネントを直接インポートする機能）
  • スペック精度：中
  • リポジトリ： https://github.com/JosephusPaye/Keen-UI

結論（TL; DR）さまざまなコンポーネントが必要であるが、他のすべて（レイアウト、タイポグラフィ、ツールなど）を自分で処理している場合に適しています。 また、パフォーマンス部門には少し欠けているようです。

特記事項

  • Muse-UI は、残念ながら、英語のドキュメントが少し理解しにくいため、このリストに完全には含まれていませんでした。 とは言うものの、中国ではかなりの支持を得ており、 VueMaterialやVuetifyよりもはるかにスッキリしています。

Antデザイン

Antデザインは、中国で人気のあるデザイン言語です。 これは、世界最大のeコマース企業の1つであるAlibabaによって作成されました。 Ant Designは、使い慣れた間隔と手がかりを、使いやすい、わずかに丸みを帯びたインターフェイス要素で優先します。 携帯電話またはデスクトップで中国語のアプリケーションを使用したことがある場合は、それらすべてが親しみやすく、やや親しみやすい感じで、余白を小さくし、白地に明るい色を選択していることに気付くでしょう。 それがAntDesignが伝えようとしている感覚です。

アリババはさまざまな開発目的でVueを使用しているため、AntDesignUIライブラリが豊富に用意されているのも当然です。

エレメント

Element UIを含めずに、Vueコンポーネントツールキットのまとめを作成することはできません。 これは、Vueで利用できる最も古くて最もよく知られているUIライブラリの1つであり、それ以来、ReactとAngularにも移植されています。 Eleme のメンバーは最近、新しいテーマ、アクセシビリティの向上、Typescriptのサポート、新しいアイコン、さまざまな新しいコンポーネントとオプションを含む2.0バージョンのElementUIをリリースしました。

Ant Designに直接準拠していませんが、そこからかなりの数の手がかりを借りています。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜20,200つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） ??? （フレキシブル）
  • 主な開発者： Eleme
  • ドキュメントの品質：完全
  • ドキュメント言語：中文（中国語）、英語、スペイン語（近日公開）
  • 主要コミュニティ言語：中文（中国語）（英語は2番目に近く、中国語の問題はを介して自動的に英語に翻訳されます。 ボット。）
  • コンポーネント：入力、高度な入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：中
  • テーマ性：色の変更、SCSSテーマ。
  • モジュール性： High （デフォルトで必要なもののみを使用します。）
  • スペック精度：低
  • リポジトリ： https://github.com/ElemeFE/element

結論（TL; DR）要素は少しヘビーヒッターです。 それはあなたが必要とすることができるすべてとそれ以上を持っています。 いくつかの規則は少し奇妙ですが、それ以外の点では、ほとんどのユースケースをカバーするのに適しています。 Elementのコンポーネントと機能の品質は他の追随を許さないものであり、迅速な使い捨てプロジェクトから大規模なサイトやアプリまで、あらゆるものに非常に便利です。

iView

Elementと同様に、 iView には、Antデザイン言語にほぼ準拠した膨大な数のコンポーネントが含まれています。 また、テーマを処理するためのいくつかのコミュニティツールとカスタムWebpackローダーもあります。 現在、活発に開発中です。 私の唯一の懸念は、パフォーマンスの低下という奇妙なスパイクがときどき発生することです。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜11,100つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 656KB
  • 主な開発者： Alipay ＆ アレスン
  • ドキュメントの品質：完全
  • ドキュメント言語：中文（中国語）、英語
  • 主要コミュニティ言語：中文（中国語）（英語は2番目に近く、中国語の問題はを介して自動的に英語に翻訳されます。 ボット。）
  • コンポーネント：入力、高度な入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：中
  • テーマ性：LESS/変数
  • モジュール性： High （ツリーシェイクを使用してコンポーネントを直接インポートする機能）
  • スペック精度：低
  • リポジトリ： https://github.com/iview/iview

結論（TL; DR） iViewは、多数の高品質コンポーネントを利用できるElementの価値ある競争相手です。 しかし、結果として重量部門で苦しんでいます。

特記事項

  • AT-UI は、別のAnt Designライブラリの素晴らしいスタートのように見えます。優れたドキュメントと、そのコンポーネントをパックから際立たせるいくつかのわずかなスタイルの違いがあります。 残念ながら、それはまだかなり早い段階であり、コンポーネントの数は限られています。 このスペースをご覧ください。
  • fish-ui は、すっきりとした、実用的なスタイルで、すでに多くのコンポーネントが利用可能です。 ただし、ドキュメントは少し質が低く、説明がほとんどありません。

他の

上記のカテゴリに当てはまらないコンポーネントコレクションがいくつかありますが、一見の価値があります。

Buefy

Bulma の上に構築された、Buefyは、Bulmaスタイルで動作するために必要なロジックのみを提供し、可能な限り邪魔にならないようにします。 このように、それはかなり軽量ですが、それでも素晴らしいように見えます。 他のフレームワークに含まれるすべてのコンポーネントが含まれているわけではありませんが、一般的なコンポーネントのほとんどが含まれています。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜1,600つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 385KB
  • 主な開発者： Rafael Beraldo
  • ドキュメントの品質：良い
  • ドキュメント言語：英語
  • 主要コミュニティ言語：英語
  • コンポーネント：入力、高度な入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：低
  • テーマ性：SASS/変数
  • モジュール性：低
  • リポジトリ： https://github.com/rafaelpimpa/buefy

結論（TL; DR） Buefyは、サイトに興味深く柔軟なUIコンポーネントが必要な場合に最適です。 たぶん、筋金入りのWebアプリにはそれほど優れた選択肢ではありません。

BootstrapVue

由緒あるBootstrapがバージョン4で再び復活し、これまで以上に滑らかに見えます。 Vueコミュニティは、決して取り残されることなく、 BootstrapVue で応答しました。これは、Bootstrap 4のjQuery部分を適切なVueコンポーネントに置き換え、その他の便利なビットも大量に追加するライブラリです。 BootstrapVueはレイアウト部門で多くをカバーしていますが、モバイルよりもデスクトップでの使用を対象としたより高度な入力に関しては、少し不足していると感じるかもしれません。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜3,000つ星
  • ライセンス： MIT
  • サイズ:(pre-gzip） 315KB （188KB+ブートストラップ4CSS）
  • 主な開発者： プーヤパルサ ＆ トロイモアハウス
  • ドキュメントの品質：完全
  • ドキュメント言語：英語
  • 主要コミュニティ言語：英語
  • コンポーネント：入力、インジケーター、ナビゲーション、ダイアログ、レイアウト
  • アニメーション：低
  • テーマ性：SASS/ブートストラップ4
  • モジュール性： High （すべてのコンポーネントは直接インポートすることも、関連するコンポーネントを含むプラグインとしてインポートすることもできます。）
  • リポジトリ： https://github.com/bootstrap-vue/bootstrap-vue

結論（TL; DR） Bootstrapが好きなら、おそらくBootstrapVueが好きになるでしょう。 これは、主にデスクトップおよび/またはキーボードシステムで使用されるサイトに最適です。 モバイルまたはより高度なアプリでのマイレージは異なる場合があります。 BootStrapVueはまた、アクセシビリティ部門で、ここにある他のほとんどのツールキットよりもはるかに優れた仕事をします。

不足している、または追加する必要があると思われるものがある場合、またはコンポーネントライブラリの選択についてお知らせしたい場合は、ご意見をお聞かせください。