Help us understand the problem. What is going on with this article?

Vue.js おすすめライブラリ 21選(おまけ+1)

どーも、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のすべての機能に基づいて提供しています
デモ
公式ドキュメント


9. Vue-Socket.io

Vue-Socket.ioは Vue.js のためのsocket.io統合で、使いやすく、Vuexとコンポーネントレベルのソケットコンシューマ管理をサポートしています。
デモ
公式ドキュメント


10. Vue-multiselect

selectbox で複数選択したい!と思う時ってよくありますね。
そんな時は、こちらの Vue-multiselect の一択です。
タグの選択もできるので、検索の時などに役立ちそうですね。
公式ドキュメント


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
Nuxt.JS

参考文献
私たちはどうして公式ドキュメントが読めないのか?

a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした