Vue3.3 での Function Signature を用いた JSX での Vue コンポーネントの書き方
概要 Vue.jsはバージョン3.3以降で、開発者に新しい書き方を提供するための機能を追加しました。この新機能、Function Signature を用いること...
Vue
Vue で コンポーネント内から子要素のテキストを取得する方法
概要 コンポーネント内の子要素のテキストを取得する方法について。 方法にはTemplate RefsとSlotsを使った2パターンがあります。 Template Refs...
Nuxt 3 で Markdown ベースのブログを作る
概要 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コードを生成できるアプリを Vue3 で実装します。 生成したQRコードを読み取るとあらかじめ入力したURLにリンクするようにします。 QRコード...
Vue 3 の状態管理ライブラリ Pinia のイントロダクション
概要 Vue 3 の新しい状態管理ライブラリ Pinia の使い方について簡単に紹介します。 インストール まずはcreatePiniaを呼び出します。 その前にuse...
Vue と D3.js を使ってチャートを作成する
概要 Vue と D3.js を使って簡単なチャートを作ってみます。 セットアップ 必要なライブラリをインストールします。 npm install d3-array d3-scale d3-shape チャートの描写 チャート本体のコン...
VueRouter のナビゲーションガードのテストを書く
概要 VueRouter のナビゲーションガードのテストの書き方について。 グローバルガード コンポーネント内ガード それぞれでの書き方を紹介します。 グローバルガード...
VueRouter を使ったコンポーネントのユニットテスト
概要 VueRouter を使ったコンポーネントのユニットテストの書き方について簡単にまとめています。 RouterLink をテストする 以下のようにテスト対象のコンポーネントが RouterLink を...
現在時刻をモックした Vue コンポーネントのテストを書く
概要 Vue コンポーネントのユニットテストで日時を特定の時点に設定してテストを実行したいときがあります。 Jest のモック関数である SpyOn を使って任意の時間を...
Vue.js でコンポーネントのメソッドをテストするときに注意すること
概要 Vue.js でコンポーネントメソッドのテストがうまくいかずハマってしまったので備忘録として残しておきます。 テストフレームワークには Jest を使っていまし...