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