最近使ったVueのUIライブラリメモ - 独学エンジニアのメモ帳

ここ最近業務で触れたVue用UIライブラリのメモです。

vue-carousel
普通のカルーセル。
採用しなかったが触れてみたので。
Vue Carousel

vue-awesome-swiper
もうひとつカルーセル。
こっちの方がいろいろ出来そうで良さげだったので採用した。
vue-awesome-swiper | Homepage | Surmon's projects

vuedraggable
ドラッグアンドドロップで移動できる。
VueでD＆Dやるならほぼこれで決まりっぽい。
調べてもこれ以外あまり出てこないし、機能的にも十分。
vuedraggable

vue-multiselect
高機能なサジェスト対応セレクトボックス。
高機能な分、ちょっと癖がある。
Vue-Multiselect | Vue Select Library

v-odometer
回転しながら数値を表示できるアニメーションライブラリ。
odometer.jsのラッパー。
必要で使ったは良いが、個人的にはあまり好きなUIではない。
GitHub - JefferyHus/v-odometer: Odometer VueJS component

v-tooltip
ツールチップ表示。使い方がめっちゃ簡単。
v-tooltip demo

vue-ctk-date-time-picker
高機能な日時選択カレンダーライブラリ。
複数、レンジでの選択、時間の選択までカバー。
マテリアルデザイン&レスポンシブ対応でかなり強い。
欠点として、重い。日付操作の重量級ライブラリ「moment」に依存しているので余計に。
GitHub - chronotruck/vue-ctk-date-time-picker: VueJS component to select dates & time, including a range mode

v-calendar
カレンダー表示。
インライン表示のカレンダーとして使ったが、datepickerとしても使える。 Introduction | V-Calendar

vue-chartjs
Chart.jsのラッパー。
グラフといえばとりあえずこれ。
最初に | 📈 vue-chartjs

vue2-google-maps
Googlemap表示に使える。
高度なことは難しそうなので、その場合はライブラリ使わない方が良い。
UIライブラリとはちょっと違うけどついでに。
GitHub - xkjyeah/vue-google-maps: Google maps component for vue with 2-way data binding

まとめ

VuetifyのようなUIコンポーネントライブラリを使えば、たいていのものは実装できた印象。
デザイン的に統一感も出しやすいので、以下のような場合は素直に頼るのもあり。
・UIに強いこだわりがない
・ある程度の規模になることが見込まれる
・強いエンジニアがいない

ただ、この手のライブラリは初期の学習コストがかかるので、
都度ライブラリ選定する方が、必要に応じて調べれば良いので簡単といえば簡単。