【2019年12月】Vue.jsライブラリ記事まとめ

2020年1月6日

Vue.jsライブラリ12月記事まとめ

毎日は見てられない人向けの2019年12月のVue.jsライブラリの紹介記事まとめです。

 

Vue.jsライブラリ リンク集

 

ショートカットキーを設定できる「vue-global-events」

vue-global-eventsは、ショートカットキーをグローバルイベントとしてコンポーネントに登録できるライブラリです。

キーボードの組み合わせはもちろん、マウスのクリックも制御することが可能です。
単一のイベントで登録解除することも可能です。

 

ショートカットキーを設定できる「vue-global-events」

 

>>記事はこちら

 

トーストウィジェットを「vue-easy-toast」で実装する

vue-easy-toastは、トーストウィジェットを実装できるコンポーネントライブラリです。

特に目立ったクセも無く、苦労せずに実装することが可能です。

 

トーストウィジェットを「vue-easy-toast」で実装する

>>記事はこちら

 

20種類のCSSスピナーが簡単に使える「epic-spinners」

epic-spinnersは、CSSでアニメーション化されたスピナー20種類備えたコンポーネントライブラリです。

HTMLとCSSを駆使して実装されており、非常に見応えのあるアニメーションが揃っております。

 

20種類のCSSスピナーが簡単に使える「epic-spinners」

>>記事はこちら

 

改行に合わせて高さが変わるテキストエリア「vue-textarea-autosize」

vue-textarea-autosizeは、改行に合わせて高さを変えてくれるテキストエリアが実装できるコンポーネントライブラリです。

最大の高さを設定するれば、それ以降はスクロールバーに切り替えてくれる機能もあります。

 

改行に合わせて高さが変わるテキストエリア「vue-textarea-autosize」

>>記事はこちら

 

HTMLでカスタマイズ可能なツールチップを「vue-directive-tooltip」で実装する

vue-directive-tooltipは、ツールチップを実装できるコンポーネントライブラリです。

ツールチップを表示する位置はもちろん、表示時間の設定や、offset設定なども行うことが可能です。

ref プロパティを使用することで、ツールチップ自身のHTMLを自作することも可能です。

 

HTMLでカスタマイズ可能なツールチップを「vue-directive-tooltip」で実装する

>>記事はこちら

 

 

ギャラリーを実装するなら「v-gallery」がおすすめ

v-galleryは、画像のリスト表示オーバーレイ表示を一括で行ってくれるライブラリです。

モード変更でカルーセルスライダーにすることも可能です。

非常にシンプルな構造となっており、実装するのを1分で行えます。

 

ギャラリーを実装するなら「v-gallery」がおすすめ

>>記事はこちら

 

1000種類以上のSVGアイコンUniconsを使用できるライブラリ「vue-unicons」

vue-uniconsは、1000種類以上のSVGアイコン「Unicons」を使用できるコンポーネントライブラリです。

線だけのあるい、塗りのされたアイコンを指定して使用することが可能です。

 

1000種類以上のSVGアイコンUniconsを使用できるライブラリ「vue-unicons」

>>記事はこちら

 

Vue.jsで確認ダイアログを実装するなら「vuejs-dialog」がおすすめ!

vuejs-dialogは、確認ダイアログを実装できるコンポーネントライブラリです。

プロンプトの設定も可能です。

クリック時のローディングアニメーションも付属されており、Ajax通信などの処理待ちに便利です。

 

確認ダイアログを実装するなら「vuejs-dialog」がおすすめ!

>>記事はこちら

 

ドロップダウンニューを「vue-dropdown-menu」で実装する

vue-dropdown-menuは、ドロップダウンメニューを実装できるコンポーネントライブラリです。

マウスホーバーでメニューを展開したり、マウスを離したときに開閉するまでの時間を設定できたりなどが可能です。

 

ドロップダウンニューを「vue-dropdown-menu」で実装する

>>記事はこちら

 

Vue.jsの画像やコンテンツのスマホ対応に適したカルーセルスライダー「vue-flickity-2」

vue-flickity-2は、FlickityをVue.jsに対応させたカルーセルスライダーライブラリです。

スマホやタブレットと相性が良く、レスポンシブにも対応しています。

 

Vue.jsの画像やコンテンツのスマホ対応に適したカルーセルスライダー「vue-flickity-2」

>>記事はこちら

 

3Dノードネットワークを描写できる「vue-d3-network」

vue-d3-networkは、3Dノードネットワークを描写できるコンポーネントライブラリです。

ノードの設定と紐付けラインを指定することでネットワークを構築できます。

ノードの色の変更や大きさの変更が可能です。

 

3Dノードネットワークを描写できる「vue-d3-network」

>>記事はこちら

 

イニシャルのアバター画像を表示する「vue-avatar」

vue-avatarは、ユーザーイニシャルのアバター画像を表示するコンポーネントライブです。

ユーザー名をスペースかハイフンで分割することが可能です。

 

イニシャルのアバター画像を表示する「vue-avatar」

>>記事はこちら

 

プレビュー付きのアップロードコンポーネントを実装する「v-uploader」

v-uploaderは、プレビュー付きのアップロードコンポーネントを実装するためのライブラリです。

ファイルのアップロード削除サーバーレスポンスを備えているため、対象のURLを設定するだけでフロント側の処理を作成する必要がありません。

単体のアップロードはもちろん、複数のアップロードを行うことも可能です。

 

プレビュー付きのアップロードコンポーネントを実装する「v-uploader」

>>記事はこちら

 

主要なソーシャルネットワークをリンク共有する「vue-social-sharing」

vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。

TwitterやFacebookなどはもちろんLineやSkypeなども備えています。

ライブラリは非常に軽く、驚異の2kb未満を誇っています。

 

主要なソーシャルネットワークをリンク共有する「vue-social-sharing」

>>記事はこちら

 

サイトマップが作れそうなツリー図を作成できる「vue-orgchart」

vue-orgchartは、編集可能な組織図を作成できるコンポーネントライブラリです。

JSONのインポートとエクスポートをサポートしています。

またチャートを画像としてエクスポートすることも可能です。

 

サイトマップが作れそうなツリー図を作成できる「vue-orgchart」

>>記事はこちら

 

 

さいごに

2019年12月のアクセス数は、年末ということもあってか月初にアクセスが伸び月末にはアクセスが落ちるという結果でした。

結果的には、目標にしていたアクセス数にギリギリあと12PV)到達できなかったのが悔しいです。

月末に風邪でダウンしてしまい、締めの記事更新ができなかったのが痛かったなあ。

 

今月の記事で特におすすめのライブラリベスト3は以下になります。

1,vue-textarea-autosize

2,epic-spinners

3,vue-unicons

 

今年はライブラリの紹介記事だけじゃなくて、複数のライブラリを駆使した結果物とかもご紹介できたらなあーなんて思っています。

直近では、管理人の職場の社内環境調査アンケートVue.jsを使って作ったので、それの紹介とかですかねー

 

今年も カバの樹 をよろしくお願いします。

 

 

前月のまとめ記事

【2019年11月】Vue.jsライブラリ記事まとめ

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js, まとめ, ライブラリ
-,