Vue

概要 コンポーネント内の子要素のテキストを取得する方法について。 方法にはTemplate RefsとSlotsを使った2パターンがあります。 Template Refs...

概要 Nuxt 3 で Markdown を利用したブログサイトを作成します。 今回作成する完成形はこちら .iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 環境構築 Nuxt プロジ...

概要 QRコードを生成できるアプリを Vue3 で実装します。 生成したQRコードを読み取るとあらかじめ入力したURLにリンクするようにします。 QRコード...

概要 Vue 3 の新しい状態管理ライブラリ Pinia の使い方について簡単に紹介します。 インストール まずはcreatePiniaを呼び出します。 その前にuse...

概要 Vue と D3.js を使って簡単なチャートを作ってみます。 セットアップ 必要なライブラリをインストールします。 npm install d3-array d3-scale d3-shape チャートの描写 チャート本体のコン...

概要 VueRouter のナビゲーションガードのテストの書き方について。 グローバルガード コンポーネント内ガード それぞれでの書き方を紹介します。 グローバルガード...

概要 VueRouter を使ったコンポーネントのユニットテストの書き方について簡単にまとめています。 RouterLink をテストする 以下のようにテスト対象のコンポーネントが RouterLink を...

概要 Vue コンポーネントのユニットテストで日時を特定の時点に設定してテストを実行したいときがあります。 Jest のモック関数である SpyOn を使って任意の時間を...

概要 Vue.js でコンポーネントメソッドのテストがうまくいかずハマってしまったので備忘録として残しておきます。 テストフレームワークには Jest を使っていまし...

概要 プログレスバーを簡単に実装できる vue-progressbar ライブラリを使って再利用可能なプログレスバーを表示するコンポーネントを作ります。 プロジェクトの作成 VueCLI の...