VueScrollmonitorは、スクロールモニタで要素がビューポートに出入りするときにイベントを受け取ることができるライブラリです。もともとはscrollMonitorというライブラリです。要素を監視してイベントをトリガーするウォッチャーオブジェクトを使用して行います。 ウォッチャーオブジェクトには、ビューポートに対する要素の可視性や位置など、監視する要素に関する情報も含まれています。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
vue-strollは、リストのスクロールにエフェクトを実装するライブラリです。元々はstroll.jsというGithubスター 4000を超えるライブラリです。iOSおよびAndroid 4.x用の特別なタッチ対応モードを含むCSS 3D変換をサポートするブラウザーで動作します。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
vue-recaptchaは、Google reCAPTCHA V2用のコンポーネントライブラリです。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
Google reCAPTCHA のV3とV2の実装手順を備忘録しました。画像付きの導線と、コピペで実装できるサンプルのソースコードを掲載しています。
vue-grid-layoutは、ドラッグやリサイズが可能なグリッドレイアウトコンポーネントです。グリッドを再構築せずにウィジェットを追加または削除できたり、レイアウトをシリアル化して復元できます。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
コンポーネントのカスタムイベントがキャメルケースになっているせいで、HTMLのカスタムイベントが動作しませんでした。しかしライブラリのコンポーネントを別コンポーネントに取り込むと動かすことができました。
vue-qriouslyは、QRコードを作成することができるライブラリです。qriousというライブラリが元になっています。QRコードを作成する時に色やサイズなどの設定を行うことができます。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
vue-qrcode-readerは、QRコードリーダーを実装できるコンポーネントライブラリです。WEBページ上でカメラを起動してリアルタイムでQRコードを読み取ることができます。他にもQRコードをアップロードして読み込むコンポーネントが搭載されています。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
vuejs-countdownはカウントダウンを実装できるコンポーネントライブラリです。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
「vue-form-wizard」と「vue-swal」を組みあせてフォームを作ったら面白いんじゃないかってことで、作ってみました。
「vue-form-wizard」はwizard型フォームを実装するためのライブラリです。外部依存関係のないvueベースのコンポーネントであり、タブウィザードの管理を簡素化し、詳細に時間を浪費するのではなく、アプリの機能部分に集中できるようにします。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
「vue-diagrams」はreact-diagramsにインスパイアされたダイアグラムを実装するライブラリです。ノードを色を変更したり、ノード同士を連結したりすることができます。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
「Vue Carousel 3D」は、3Dカルーセルスライダーを実装するライブラリです。自動再生の機能はもちろん、一時的にスライドを止めることも可能です。スライドの方向も設定することが可能です。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
Vue JSON Tree Viewは、Tree形式でJSONを表示するライブラリです。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
vue-password-strength-meterは、強度推定付きパスワードフォームを実装するライブラリです。パスワード強度推定には、デフォルトでzxcvbnを使用しています。パスワードの表示/非表示を切り替えやパスワードカウントバッジを表示、また専用のパスワード強度推定ライブラリを設定することができます。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
この記事は、当ホームページの2019年7月中のVue.jsライブラリ記事のまとめです。18個のライブラリをご紹介します。
vue-virtual-scroll-listは仮想スクロールリストを実装するライブラリです。高いスクロールパフォーマンスで大量のデータリストをサポートします。リストのアイテムとコンポーネントが独立しています。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
Vue-Touch-Rippleはタッチイベントにrippleを実装するライブラリです。rippleの速度や色、透過をカスタマイズすることができます。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。
![[備忘録]Google reCAPTCHAを実装する](https://i1.wp.com/www.kabanoki.net/wp-content/uploads/2019/08/5-2.png?resize=472%2C350&ssl=1)
