忘れないように記録しとこ

カバの樹

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

2020年8月3日

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

 

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

Vue.jsで音楽プレイヤーを実装する「vue-aplayer」

vue-aplayerは、Vue.jsを使って音楽プレイヤーを実装することができるコンポーネントライブラリです。

歌詞のスクロール機能やリピート、シャッフルコントロールなどがデフォルトで準備されています。

 

【動画サイズ:56KB】

 

記事はコチラ

 

 

Vue.jsでタイピングアニメーションを実装する「vue-typed-js」

vue-typed-jsは、任意の文字でタイピングアニメーションを実装するコンポーネントライブラリです。

入力速度や開始速度をミリ秒単位で設定することが可能です。

またタイピングのアニメーションを変更することが可能です。

 

【動画サイズ:11KB】

 

記事はコチラ

 

 

Vue.jsで画像を遅延読み込みする「v-lazy-image」

v-lazy-imageは、ビューポートへ画像が入って来たときに、画像を遅延読み込みするコンポーネントライブラリです。

 

【動画サイズ:150KB】

 

記事はコチラ

 

 

Vue.jsで画像のトリミング表示を行う「vue-object-fit」

vue-object-fitは、画像サイズを変更せずにトリミング表示を行うコンポーネントライブラリです。

画像をSVGに取り込むため方式な為、メジャーなブラウザなら問題無く使用することが可能です。

 

【動画サイズ:1MB】

 

記事はコチラ

 

 

Vue.jsで入力テキストに合わせて長さが可変するフィールドを実装する「vue-input-autowidth」

vue-input-autowidthは、入力されたテキストに合わせて入力フィールの長さが可変するコンポーネントライブラリです。

最大幅や最小幅を指定して設定することが可能です。

 

【動画サイズ:142KB】

 

記事はコチラ

 

 

Vue.jsでカラーバリエーションの用意されたプログレスバーを実装する「k-progress」

k-progressは、シンプルにプログレスバーを実装できるコンポーネントライブラリです。

 

【動画サイズ:16KB】

 

記事はコチラ

 

 

Vue.jsで軽量、シンプルなスムーススクロール実装する「vue2-smooth-scroll」

vue2-smooth-scrollは、vue-smooth-scrollから拡張された軽量、シンプルなスムースクロールライブラリです。

垂直、水平、どちらにも設定が可能です。

 

【動画サイズ:43KB】

 

記事はコチラ

 

Vue.jsでTwitterのような投票システムを実装する「vue-poll」

vue-pollは、Twitterのような投票システムコンポーネントライブラリです。

投票をしなくても結果を確認したり、複数の投票を行う設定をすることも可能です。

 

【動画サイズ:29KB】

 

記事はコチラ

 

Vue.jsでシンプルなオートコンプリートドロップダウンを実装する「vue-simple-search-dropdown」

vue-simple-search-dropdownは、検索機能が付いたオートコンプリートドロップダウンのコンポーネントライブラリです。

 

【動画サイズ:95KB】

 

記事はコチラ

 

Vue.jsでカスタムViewPortを定義する「vue-viewports」

vue-viewportsは、カスタムViewPortを定義するライブラリです。

viewportの幅をmatchMediaを利用して監視して、定義したラベルをレスポンスします。

 

 

記事はコチラ

 

7月へのつぶやき

アクセス数

2020年7月のアクセス数は、前月に比べて1%の減少でした。
そろそろ落ち着いて来たのでしょうか?

気になるのは、検索順位が2位分あがったのですが、検索ユーザー数が減ったことです。
私の勤め先もそうですが、休業する会社が増えている?のが原因でしょうか?
う~む・・・

 

最近の管理人

N予備校始めました。

 

 

二ヶ月前に申し込みすれば、一年間無料だったらしいです。くそー

 

前月のまとめ記事

おすすめ!
【2020年6月】Vue.jsライブラリ記事まとめ

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

続きを見る

 

  • B!