どーも、8ビットエンジニアです。
今更感はいなめませんが、まとめます。
対象者
・これからVue.jsを勉強する人
・Vue.jsに興味がある人
・npm or yarn をある程度理解している人
機能側
1. vue-chartjs
vue-chartjsはvueのChart.jsのラッパーです。
再利用可能なチャートコンポーネントを簡単に作成できます。
2. vue-fa
Vue.js で使用するアイコンですね。
FontAwesome5 を使用しています。
3. vee-validate
vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。
テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
サポートされている40以上種類でのエラーが自動的に生成されます。
なんて便利なことでしょう。
4. eslint-plugin-vue
Vue.js用の公式ESLintプラグインです。
このプラグインを使用すると、ESLintを使用して.vueファイルの<template>と<script>を確認できます。
・基本的に構文エラーを見つけます。
・Vue.jsディレクティブの誤った使い方を見つけます。
・Vue.jsスタイルガイドの違反を見つけます。
ESLintエディタの統合は、コードをリアルタイムでチェックするのに役立ちます。
ただし、console.log などでエラーを出してきて「なんでやねん」となるので要注意です。
その場合は、ルールを設定しましょう。
rules: {
'no-console': 'off'
}
5. vue-lazyload
画像の遅延読み込みするなら、こちらの「vue-lazyload」がおすすめです。
オプションも設定できるので初心者の方にも簡単に実装できるかと思います。
公式ドキュメント
6. axios
Vue.js で API からデータを取得するなら、こちらを選択しましょう。
データを取得するには色々な方法があると思いますが、
一般的なアプローチは Promise ベースの HTTP クライアントの axios を使うことです。
async/awaitは全てのブラウザで対応しているわけではないため、利用するならBabel等でトランスパイルする必要があります。
async ブラウザ対応状況
es2016 ブラウザ対応状況
7. vue-style-loader
ローダーデザインをカスタムしたい場合に利用します。
デフォルトでvue-loaderに使用されるため、ほとんどの場合、このローダーを自分で設定する必要はありません。
Vue SSRアプリを作成している場合は、JavaScriptファイルからインポートしたCSSにも、このローダーを使用する必要があります。
公式ドキュメント
8. vuedraggable
ドラッグで順番を変えたい時ってよくありますよね。
そんな時は、こちらの Vue.Draggable がおすすめ。
複雑なコードを書く必要なく、ドラッグで順番を変えることが可能です。
Sortable.jsのラッパーで、Sortable.jsのすべての機能に基づいて提供しています
[デモ]
(https://sortablejs.github.io/Vue.Draggable/#/simple)
[公式ドキュメント]
(https://github.com/SortableJS/Vue.Draggable)
9. Vue-Socket.io
Vue-Socket.ioは Vue.js のためのsocket.io統合で、使いやすく、Vuexとコンポーネントレベルのソケットコンシューマ管理をサポートしています。
[デモ]
(http://metinseylan.com/vuesocketio/)
公式ドキュメント
10. Vue-multiselect
selectbox で複数選択したい！と思う時ってよくありますね。
そんな時は、こちらの Vue-multiselect の一択です。
タグの選択もできるので、検索の時などに役立ちそうですね。
[公式ドキュメント]
(https://vue-multiselect.js.org/)
11. vuejs-datepicker
Vue.js用のカレンダーですね。
| ja | Japanese |
|---|---|
| オプションも豊富にあり、日本語にも対応しているので日付を入れたい場合はこちらを導入してもよさそうです。 | |
| デモ |
12. vue-md-editor
Vue.js でマークダウンを利用したいなら、こちら。
デモ
公式ドキュメント
13. vue-typer
Vue.js の タイピング バージョン。
あまり必要性を感じられませんが、なんかかっこよく見せたい時にどうぞ。
デモ
公式ドキュメント
14. vue-rate-it
よく目にする評価の星5 の機能ですね。
自分で実装するにはcssも書かなくてはいけないですが、
こちらなら、そんな必要はありません。
デモ
公式ドキュメント
15. Vue-good-table
Vue.js用の並べ替え、列のフィルタリング、ページ付けなどの基本機能を備えた、使いやすく強力なデータテーブルを作成できます。
デモ
公式ドキュメント
16. Vuex
言わずと知れた、 Vue.jsアプリケーションのための「状態管理パターン+ライブラリ」です。
とても便利で重宝すると思うのですが、一点だけデメリットがあるかなという印象です。
それは、フォームの扱いです。
v-model で 双方向算出プロパティを利用するためには、セッターを利用しなければいけないという点です。
要は、computed で v-model を使用する際は、get & set 二種類用意しろよって話です。
まぁ、慣れの問題かもしれません。
公式サイトが日本語に対応しているので、是非そちらを参考にして導入するべきか検討してみてください。
公式ドキュメント
17. Vue Router
こちらも Vue.js 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。
もし、Vue CLI 3を使用している場合は、vue createをする際にvue-routerを選択するとプロジェクト初期化の際に自動的に組み込まれます。
こちらも公式サイトが充実してますし、Qiitaにも優しい解説が豊富にあるので、説明は必要なさそうですね。
公式ドキュメント
デザイン UI/UX 側
18. Vuetify
bootstrap使っとけばええんちゃうの？
いいえ、違います。
Vue.js 使用するなら、UIはいろいろ選択肢があります。
ドキュメントも公式サイトで豊富に用意されているので、コンポーネントを活用したい方は、こちらがおすすめです。
また、IE11 & Safari9 もサポートしたい場合は、babel-polyfill も一緒にインストールしなければいけません。
※IE9, IE10 はサポート対象から外れています。
公式ドキュメント
19. element-ui
Vue2.0ベースのコンポーネントライブラリです。
サンプルのコンポーネントが用意されている他、React や Angular もサポートされているため、React や Angular で馴染みがあるならこちらのUIをおすすめします。
公式ドキュメント
20. vue-material
あの google の マテリアルデザインに従って作成された Vue.js 用のマテリアルデザインです。
動的テーマ、オンデマンドコンポーネント、そして使いやすいAPIを備えた最新のすべてのWebブラウザをサポートし、あらゆる画面にフィットするように設計されたアプリケーションを作成します。
私はまだ、試したことはありませんが、試す価値はありそうです。
公式ドキュメント＆デモ
21. bootstrap-vue
bootstrap の Vue.js 版です。
やはり、人気なだけあって使い勝手が良いです。
デメリットをあげるとするなら、見飽きたでしょうか。。
公式ドキュメント
その他
ちなみに、nuxt.js では
| 名前 | 公式ドキュメント |
|---|---|
| Bootstrap | https://bootstrap-vue.js.org/ |
| Vuetify | https://vuetifyjs.com/ja/ |
| Bulma | https://bulma.io/ |
| Tailwind | https://tailwindcss.com/docs/what-is-tailwind/ |
| Element UI | http://element.eleme.io/ |
| Ant Design Vue | https://vue.ant.design/docs/vue/introduce/ |
| Buefy | https://buefy.org/ |
の7種類のUIフレームワークが用意されています。
どれもドキュメントが豊富に用意されており悩みますね。
おまけ
22. body-scroll-lock
こちらはスマホのUIを利用する際とても便利です。
ターゲット要素（例：modal / lightbox / flyouts / nav-menu）のスクロールを中断することなく、ボディスクロールのロック（iOS MobileおよびTablet、Android、デスクトップSafari / Chrome / Firefox）を有効にします。
これ実装するのに時間がかかるのですよね。
公式ドキュメント
以上
ライブラリを利用する際は、
公式ドキュメントを読むようにしましょう。
上記以外にもVue.js オススメのライブラリなどがありましたら、教えてください。
ほな！また！
参考資料
[Node Package Module]
(https://www.npmjs.com/search?q=vue.js)
[Nuxt.JS]
(https://ja.nuxtjs.org/)